Préface
Dans l'article précédent, l'enregistrement des composants a été introduit, y compris l'enregistrement local et l'enregistrement global. Ici, vous présenterez les composants parent-enfant et la communication entre les composants parent-enfant.
Composant parent-enfant
Le composant parent-enfant, comme son nom l'indique, consiste à appliquer des composants pour former une relation parent-enfant dans le composant. Voici un exemple simple:
<body>
<div id="app">
<father> </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components:{
father:{
template:`
<div>
<h1>父组件</h1>
<child></child>
</div>`,
components: {
child:{
template:`<h1>子组件</h1>`
}
}
}
}
})
</script>
</body>
Ce qui précède est la définition du composant parent-enfant le plus simple. J'ai mentionné que l'instance est un composant, donc les propriétés de l'objet dans l'instance peuvent également être déclarées dans le composant. La définition de l'objet parent-enfant est relativement simple, parlons de la façon dont le composant parent-enfant transmet les données.
Les composants parents et enfants transmettent des données
Introduisez d'abord un attribut props, c'est un tableau, la fonction est de recevoir la valeur passée:
<body>
<div id="app">
<father title="这里是标签"> </father>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
components:{
father:{
props:["title"],
template:`
<div>
<h1>父组件</h1>
<h1>{
{title}}</h1>
<child></child>
</div>`
}
}
}
})
</script>
</body>
<!--
渲染效果：
父组件
这里是标签
-->
Nous déclarons directement une variable dans la balise de composant pour recevoir la valeur, et en même temps utilisons des accessoires pour la recevoir, et enfin peut être directement appliquée à la syntaxe prise en charge par Vue. Bien que seule une chaîne soit transmise, elle peut en fait transmettre tous les types de JavaScript. Tout comme le format de dénomination des composants, la «dénomination de cas de chameau» peut être utilisée en JavaScript, mais les tirets doivent être utilisés en html, sauf pour les chaînes de modèle.
Comme ça, nous savons déjà que nous pouvons passer une valeur statique à prop comme ceci:
<father title="这里是标签"> </father>
Prop peut également être attribué dynamiquement via v-bind, par exemple:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
Une fois que nous connaissons le transfert de valeur dynamique, le reste est facile, car la valeur de transfert du composant parent-enfant dépend de l'affectation dynamique v-bind:
new Vue({
el: '#app',
components:{
father:{
data(){
return{
msg:"白月光与朱砂痣"
}
}
template:`
<div>
<h1>父组件</h1>
<child :msg="msg"></child>
</div>`,
components: {
child:{
props:["msg"],
template:`<h1>子组件{
{msg}}</h1>`
}
}
}
}
})
Comme indiqué ci-dessus, les données msg sont d'abord définies dans le composant père, puis liées aux sous-composants en passant dynamiquement des valeurs, puis les paramètres passés sont reçus avec des accessoires et finalement rendus dans la syntaxe d'interpolation.
Méthode de transfert de composant parent-enfant
new Vue({
el: '#app',
components:{
father:{
data(){
return {
msg:""
}
},
methods:{
fatherFunction(value) {
this.msg=value
alert("白月光与朱砂痣"+value)
}
},
template:`
<div>
<h1>父组件 {
{msg}}</h1>
<child @father-function="fatherFunction"></child>
</div>`,
components: {
child:{
template:`<h1 @click="childFunction">子组件</h1>`,
methods:{
childFunction(){
this.$emit("father-function","，你想起她的好")
}
}
}
}
}
}
})
Dans ce qui précède, deux fonctions sont principalement réalisées, l'une consiste à transmettre la méthode du composant parent au composant enfant et l'autre à transmettre les données du composant enfant au composant parent.
Lors de la transmission de la méthode, les propriétés doivent v-onêtre spécifiées. Contrairement aux composants et accessoires, le nom de l'événement ne sera pas utilisé comme nom de variable JavaScript ou comme nom de propriété, il n'y a donc aucune raison d'utiliser la "dénomination de cas de chameau". Et les v-onécouteurs d'événements sont automatiquement convertis dans le modèle DOM pour toutes les minuscules (puisque HTML n'est pas sensible à la casse), il v-on:myEventdeviendra v-on:myevent- conduisez myEvent à ne pas écouter, donc lorsque le tableau de bord de recommandation de transfert de mémoire ne fonctionne pas.
Après avoir été transmis au sous-composant, le sous-composant doit définir une autre méthode et la méthode du sous-composant est this.$emit("事件名")"appelée via . Le premier paramètre est le nom de la méthode et les paramètres suivants sont les attributs de la méthode. Ici, une chaîne est transmise et les données sont transmises aux données du composant parent en appelant le composant parent via le composant enfant.