Quelles sont les méthodes d'implémentation de la communication des composants Vue ?

Vue.js est un framework frontal populaire qui fournit une approche de développement basée sur des composants pour créer des applications interactives complexes. Dans Vue, la communication entre les composants est un élément très important. Elle peut nous aider à partager et à coordonner les données et à améliorer l'efficacité du développement. Cet article présentera plusieurs méthodes d'implémentation de communication de composants dans Vue et joindra des exemples de code correspondants.

1. méthodes props et $emit

props et $emit sont les méthodes de communication de composants les plus basiques et les plus couramment utilisées dans Vue. les accessoires sont utilisés pour transmettre des données du composant parent au composant enfant, et la méthode $emit est utilisée pour déclencher des événements personnalisés dans le composant enfant et transmettre des données au composant parent.

Exemple :

// Composant parent
d477f9ce7bf77f53fbcf36bec1b69b7a
5c94db7c9f0fa17f623df6c8ed7386d953b801b01e70268453ed301cb998e90c
// Utilisez des accessoires pour Les données sont transmises au sous-composant et écoutent les événements déclenchés par le sous-composant via @my-event
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {

data() {
  return {
    message: 'Hello Vue!'
  }
},
methods: {
  handleEvent(data) {
    console.log(data);
  }
}

}

// Sous-composant T & lt; modèle & gt;
& lt; div & gt;

<button @click="sendMessage">发送消息</button>

& lt;/div & lt;/test & gt; rrrrrrr

props: ['message'], // 接收父组件传递的数据
methods: {
  sendMessage() {
    this.$emit('my-event', 'Hello Parent!'); // 触发自定义事件，并传递数据给父组件
  }
}

} l & lt;/script & gt;

$ Attributs parent et $children

Les attributs $parent et $children sont utilisés à l'intérieur d'un composant pour accéder aux instances de ses composants parent ou enfant.

Exemple :

2. // Composant parent
d477f9ce7bf77f53fbcf36bec1b69b7a

6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

importer childComponent depuis './ChildComponent. vue';

export default {

components: {
  'child-component': childComponent
},
mounted() {
  console.log(this.$children); // 访问子组件实例
}

}

2cacc6d41bbb37262a98f745aa00fbf0

// sous-composant

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

子组件

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

<script> propriétés et méthodes. <br><br>Exemple : </script>

// Composant parent
d477f9ce7bf77f53fbcf36bec1b69b7a

2012ba5eb230b7164cbd8e135501aa9353b801b01e70268453ed301cb998e90c

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {

mounted() {
  console.log(this.$parent); // 访问父组件实例
}

}

2cacc6d41bbb37262a98f745aa00fbf0
3. // Composant enfant

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

mounted() {
  console.log(this.$refs.childRef); // 获取子组件实例
  this.$refs.childRef.sendMessage(); // 调用子组件的方法
}

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export par défaut {

子组件

}

2cacc6d41bbb37262a98f745aa00fbf0

Il existe plusieurs façons d'implémenter la communication des composants Vue. Dans le développement réel, choisir la méthode de communication appropriée en fonction de besoins et de scénarios spécifiques peut améliorer efficacement l'efficacité du développement et la qualité du code. J'espère que cet article vous aidera à comprendre la communication des composants Vue.

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!