前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：
关系：vue构造->vue组件->vue实例
也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别
<script>
//vue构造
Vue.extend({
props: [],
data: function() {
return {}
},
template: "" }); //vue组件
Vue.component("mycomponent", {
props: [],
data: function() {
return {}
},
template: ""
}); //vue实例
new Vue({
el: "",
data: {}
});
</script>
从上面的代码可以看出，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>
运行结果：
我是构造函数创建：自身参数：a|外部传参：Vue.extend。
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>
运行结果：
我是构造函数创建：自身参数：a|外部传参：Vue.component
我是vue.component创建 自身参数：a|外部传参：Vue.component
我是导入模板 自身参数：a|外部入参：Vue.component
new Vue
this.$options.key表示其自定义属性值,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>
运行结果：
这里是子组件1
我是构造函数创建：自身参数：a|外部传参：vue实例参数