The difference between instance and component

When a component is imported and used somewhere, it is actually new a Vue instance of that component

New vue, vuue. Extend, vue.component difference

Vue constructs, VUE components, and VUE instances are different concepts, and their relationship is somewhat similar to the concept of Java inheritance

Relationships: VUE constructs –> VUE components —-> Vue instances

Different components can share the same VUE construct, and different VUE instances can share a VUE component

<script>
	/ / the vue structure
	Vue.extend({
		props: [].data: function() {
			return{}},template: ""
 
	});
	
	/ / the vue components
	Vue.component("mycomponent", {
		props: [].data: function() {
			return{}},template: ""
	});
	
	/ / the vue instance
	new Vue({
		el: "".data: {}}); </script>Copy the code

As you can see from the above code, vUE constructs and vUE components require the same partial initialization structure parameters, which means that vUE instances can skip vUE components and initialize their own components directly using vUE constructs — vUE constructs –> VUE instances. Here are three API differences:

vue.extend

Features:

  1. The structure can only be initialized by itself

Scope of use:

(1) Mount under an element

(2) referenced by vue instance components

(3) Vue.com Ponent component reference


<div id="app2"></div>
<script>
	var apple = Vue.extend({
		template: "< p > I am a constructor creates: its parameters: {{a}} | external mass participation: {{b}} < / p >".data: function() {
			return {
				a: "a"}},props: ["b"]});// Mount the constructor
	new apple({
		propsData: {
			b: 'Vue.extend'
		}
	}).$mount('#app2');
</script>
Copy the code

Results: I am a constructor creates: its parameters: a | external mass participation: Vue. The extend.

vue.component

Features:

(1) The component structure can be initialized by itself

(2) The component structure can be initialized by introducing vue.extend

(3) The component structure can be initialized using the third party template temple.html

Scope: Any element that has been initialized by vUE

<div id="app3">
	<applecomponent v-bind:b="vparam"></applecomponent>
	<mycomponent v-bind:b="vparam"></mycomponent>
	<templecomponent v-bind:b="vparam"></templecomponent>
</div>
 
<script>
	// method 1
	Vue.component('applecomponent', apple);
	// method 2
	Vue.component("mycomponent", {
		props: ["b"].data: function() {
			return {
				a: "a"}},template: "< p > I'm vue.com ponent create their own parameters: {{a}} | external mass participation: {{b}} < / p >"
	});
	// Third party template introduction, refer to the previous article
	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>
Copy the code

Running results:

I am a constructor creates: its parameters: a | external mass participation: Vue.com ponent

I am vue.com ponent create their own parameters: a | external mass participation: vue.com ponent

I am import template parameter itself: a | outside into the reference: Vue.com ponent

new Vue

This.options. key is its custom property value, this.options.key is its custom property value, this.options.key is its custom property value, this.*** * represents the system property value, such as this

Features:

(1) We can refer to vue.extend via our own components and pass arguments to vue.extend via our own data

(2) You can reference the component template through its own component and pass parameters to the component through its own data

Scope of use:

(1) Limited to oneself

<div id="app1">
	<dt1></dt1>
	<vueapple v-bind:b="msg"></vueapple>
</div>
 
<script type="text/x-template" id="dt1">
	<div>Here is child component 1</div>
</script>
 
<script>
	new Vue({
		el: "#app1".data: {
			msg: "Vue instance Parameters"
		},
		components: {
			dt1: {
				template: "#dt1"
			},
			vueapple: apple //}});</script>
Copy the code

Running results:

Here are my child component 1 is constructor creates: its parameters: | external mass participation: a vue instance parametersCopy the code