Dans Vue.js, la communication entre composants peut être réalisée des manières suivantes : Communication parent-enfant : transmission de données ou déclenchement d'événements via des accessoires. Communication ancêtre-descendant : partage de sources de données via provide/inject. Communication entre composants frères et sœurs : via le bus d'événements, la gestion d'état Vuex ou des événements personnalisés.
Comment communiquer entre les composants dans Vue ?
Introduction :
Dans les applications Vue.js, la communication entre composants est cruciale pour partager des données et des événements. Voici plusieurs façons d'établir une communication entre composants :
Communication parent-enfant :
Communication ancêtre-descendant :
Communication des composants frères :
Événements personnalisés :
Exemple de passage d'attribut :
<code class="HTML"><!-- 父组件 --> <template> <Child-Component :message="message" /> </template></code>
<code class="HTML"><!-- 子组件 --> <template> <div>{{ message }}</div> </template></code>
Exemple de déclenchement par événement :
<code class="HTML"><!-- 子组件 --> <template> <button @click="emitMessage">触发事件</button> </template> <script> export default { methods: { emitMessage() { this.$emit('message', '事件数据'); } } }; </script></code>
<code class="HTML"><!-- 父组件 --> <template> <Child-Component @message="handleMessage" /> </template> <script> export default { methods: { handleMessage(message) { console.log(message); // 输出:事件数据 } } }; </script></code>
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!