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

本文鏈接： https://blog.csdn.net/zeping891103/article/details/78133622

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實例參數