vue.extend vue.component new vue
原创
关系：vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件
### Vue.extend( options )
- 参数
{Object} options*用法 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data选项是特例，需要注意 - 在Vue.extend() 中它必须是函数
// html
<div id="mount-point"></div>
// js
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
// 或者 放到body 里面 （也可以放到#mount-point里面）
// const extendComponent = new Profile().$mount()
// document.body.appendChild(extendComponent.$el)
// js 结果
<p>Walter White aka Heisenberg</p>### Vue.component( id, [definition] )
- 参数
{string} id{Function | Object} [definition]*用法 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')new vue
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
var vm = new Vue({
// 选项
})以下是其他网页参考
<script>
//vue构造
Vue.extend({
props: [],
data: function() {
return {}
},
template: ""
});
//vue组件
Vue.component("mycomponent", {
props: [],
data: function() {
return {}
},
template: ""
});
//vue实例
new Vue({
el: "",
data: {}
});从上面的代码可以看出，vue构造和vue组件所需的部分初始化结构参数是一样的，这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化，也就是vue构造->vue实例，下面是三种API的区别：
vue.extend 特点：
1.只能通过自身初始化结构
使用范围：
1.挂载在某元素下
2.被Vue实例的components引用
3.Vue.component组件引用
<div id="app2"></div>
<script>
var apple = Vue.extend({
template: "<p>我是构造函数创建：自身参数：{{a}}|外部传参：{{b}}</p>",
data: function() {
return {
a: "a"
}
},
props: ["b"]
});
//挂载构造函数
new apple({
propsData: {
b: 'Vue.extend'
}
}).$mount('#app2');
</script>Vue.component 特点：
1.可通过自身初始化组件结构
2.可通过引入Vue.extend初始化组件结构
3.可通过第三方模板temple.html初始化组件结构
使用范围：
任何已被vue初始化过的元素内
<div id="app3">
<applecomponent v-bind:b="vparam"></applecomponent>
<mycomponent v-bind:b="vparam"></mycomponent>
<templecomponent v-bind:b="vparam"></templecomponent>
</div>
<script>
//方法1 【引入构造】
Vue.component('applecomponent', apple);
//方法2 【自身创建】
Vue.component("mycomponent", {
props: ["b"],
data: function() {
return {
a: "a"
}
},
template: "<p>我是vue.component创建 自身参数：{{a}}|外部传参：{{b}}</p>"
});
//方法3 第三方模板引入,可参照上一篇文章
Vue.component('templecomponent', function(resolve, reject) {
$.get("./../xtemplate/com.html").then(function(res) {
resolve({
template: res,
props: ["b"],
data: function() {
return {
a: "a"
}
}
})
});
});
var app3 = new Vue({
el: "#app3",
data: {
vparam: "Vue.component"
}
});
</script>new Vue this.
??表示系统属性值,如this.$el
特点：
1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参
2.可以通过自身components引用组件模板，通过自身data向组件传参
使用范围：
1.仅限于自身
<div id="app1">
<dt1></dt1>
<vueapple v-bind:b="msg"></vueapple>
</div>
<script type="text/x-template" id="dt1">
<div>这里是子组件1</div>
</script>
<script>
new Vue({
el: "#app1",
data: {
msg: "vue实例参数"
},
components: {
dt1: {
template: "#dt1"
},
vueapple: apple //【引入构造】
}
});
</script>为什么使用 extend
在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：
- 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
- 所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
这时候，Vue.extend + vm.$mount 组合就派上用场了。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
