前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

╰+攻爆jí腚メ 2021-09-14 06:28 264阅读 0赞

vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：

关系：vue构造->vue组件->vue实例

也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别：

从上面的代码可以看出，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实例参数