Detailed explanation of vue.js instance objects and component tree instances

This article mainly introduces the relevant information of vue.js instance object + component tree. Friends who need it can refer to it. I hope it can help everyone.

Instance object of vue

First use the new keyword of js to instantiate a vue

el: The location where the vue component or object is loaded on the page, which can be passed by id or class Or tag name

template: loaded content. HTML code/HTML fragment containing instructions or other components, template will be the template we use

**data:** Data is introduced into the component through data

The data in the component is required Data is returned in the form of a function. When different interfaces use the same component, it will not change the content of other pages because the value of one component changes.

{{ }} Variables that put data in double bracket syntax

Component registration syntax sugar

Global component

A method:

Call the Vue.extend() method to create the component constructor

Call the Vue.component(component label, component constructor) method to register the component

In The component can only be used within the scope of the Vue instance.

/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
 /*组件内容*/
 template:…… ,
 data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);

B method (same as A method, just written in a simple way):

There is no step 1 in A method, directly call Vue .component (label name, option object) method

/*B方法 全局组件2:*/
Vue.component('my-component2', {
  /*组件内容*/
 template:…… ,
 data: ……
}
/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

Local components use components attributes

"javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部组件1 /
'part-component1': partcomponent1
}，
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
"

Subcomponents

The creation method is similar to the above two methods, the difference is the location It is placed inside the component.

var compentChild ={
  el:……,
  data:……
}
component: {
  el: ……,
  data: {……}
  components: {
   'component-child': componentChild
  }
}

Built-in components

There is no need to declare components in components. Instead, use tags directly. For example, if you use built-in components in myHeader as shown below, root-view, keep-alived, etc. are also built-in components provided by Vue itself.

 var myHeader = {
   template: '<component></component> <root-view></rooot-view>'
 }

Related recommendations:

Vue.js in the parent component calls the internal method of the child component sharing

Vue.js Sharing of component communication examples

First introduction to *.Vue files in Vue.js_vue.js

The above is the detailed content of Detailed explanation of vue.js instance objects and component tree instances. For more information, please follow other related articles on the PHP Chinese website!