Explication détaillée des objets d'instance vue.js et des instances d'arborescence de composants

Cet article présente principalement les informations pertinentes sur l'objet d'instance vue.js + l'arborescence des composants. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Objet d'instance de vue

Utilisez d'abord le nouveau mot-clé de js pour instancier une vue

el : l'emplacement où le composant ou l'objet vue est chargé sur la page, qui peut être transmis par identifiant ou classe Ou nom de balise

modèle : contenu chargé. Code HTML/fragment HTML contenant des instructions ou d'autres composants, le modèle sera le modèle que nous utilisons

**données :** Les données sont introduites dans le composant via les données

Les données dans le composant Données est renvoyé sous la forme d'une fonction. Lorsque différentes interfaces utilisent le même composant, cela ne changera pas le contenu des autres pages car la valeur d'un composant change.

{{ }} Variables qui mettent les données entre doubles crochets

Sucre de syntaxe d'enregistrement des composants

Composant global

Une méthode :

Appelez la méthode Vue.extend() pour créer le constructeur du composant

Appelez la méthode Vue.component (étiquette du composant, constructeur du composant) pour enregistrer le composant

dans Le composant

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

La méthode B ne peut être utilisée que dans le cadre de l'instance Vue (la même que la méthode A, juste en écriture simple) :

Sans le premier étape dans la méthode A, appelez directement la méthode Vue.component (nom de l'étiquette, objet option)

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

Les composants locaux utilisent l'attribut composants

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

Sous-composant

méthode de création et les deux méthodes ci-dessus similaires, sauf que l'emplacement est placé à l'intérieur du composant.

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

Composants intégrés

Il n'est pas nécessaire de déclarer des composants dans les composants. Utilisez plutôt les balises directement. Par exemple, si vous utilisez des composants intégrés dans myHeader comme indiqué ci-dessous, root-view, keep-alive, etc. sont également des composants intégrés fournis par Vue lui-même.

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

Recommandations associées :

Partage de la méthode interne du composant parent appelant le composant enfant dans vue.js

Partage d'exemples de communication de composants Vue .js

Première introduction aux fichiers *.Vue dans Vue.js_vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!