Comment transmettre des données entre les composants vue.js

Avant-propos

Les composants sont l'une des fonctionnalités les plus puissantes de vue.js, et les portées des instances de composants sont indépendantes les unes des autres, ce qui signifie que les données entre différents composants ne peuvent pas se référencer les unes les autres. La manière de transférer des données est également devenue l'un des points de connaissance importants des composants.

Composants

Il existe différentes relations entre les composants. La relation entre père et fils et frère (ceux qui ne sont pas père et fils sont temporairement appelés frères).

Auteur original : Lin Xin, blog de l'auteur :

Composant parent-enfant

La relation parent-enfant signifie que le composant A utilise le composant B dans son modèle, puis le composant A est le composant parent, le composant B est le sous-composant.

// 注册一个子组件Vue.component(&#39;child&#39;, {data: function(){text: &#39;我是father的子组件！&#39;}template: &#39;<span>{{ text }}</span>&#39;})// 注册一个父组件Vue.component(&#39;father&#39;, {template: &#39;<div><child></child></div>&#39;  // 在模板中使用了child组件})

Lors de l'utilisation directe du composant père :

<div id="app"><father></father></div>

La page s'affichera : Je suis le composant enfant du père !

Le composant père utilise le composant enfant dans le modèle, c'est donc le composant parent, et le composant enfant est utilisé, donc le composant enfant est le composant enfant.

Composants frères et sœurs

Deux composants qui ne se référencent pas sont des composants frères.

Vue.component(&#39;brother1&#39;, {template: &#39;<div>我是大哥</div>&#39;})Vue.component(&#39;brother2&#39;, {template: &#39;<div>我是小弟</div>&#39;})

Lors de l'utilisation du composant :

<div id="app"><brother1></brother1><brother2></brother2></div>

La page affichera :

Je suis Grand frère

Je suis le petit frère

Prop

Si un composant enfant souhaite utiliser les données du composant parent, nous devons obtenir les données transmises par le composant parent via l'option props du composant enfant. Ci-dessous, j'utilise le format du fichier .vue pour écrire l'exemple.

Comment transmettre des données

Référencez le composant enfant child.vue dans le composant parent mother.vue et transmettez la valeur de name au composant enfant.

<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from &#39;./child.vue&#39;;export default {components: {child},data() {return {name: &#39;linxin&#39;}}}</script>

Déclarez les données qu'il espère obtenir dans l'option props du composant enfant child.vue

<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: [&#39;message&#39;]}</script>

Puis dans la page Il affichera : Bonjour linxin

Flux de données unidirectionnel

Lorsque le nom du composant parent change, le composant enfant mettra automatiquement à jour la vue. Mais dans les composants enfants, nous ne voulons pas modifier les accessoires. Si vous devez modifier ces données, vous pouvez utiliser la méthode suivante :

Méthode 1 : Attribuez prop à une variable locale, puis modifiez la variable locale si vous devez la modifier, sans affecter prop

export default {data(){newMessage: null  },props: ['message'],created(){this.newMessage = this.message;}}

Méthode 2 : Processus prop dans les propriétés calculées

export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}

Événement personnalisé

prop est unidirectionnel Lié : Quand les propriétés du composant parent changent, elles seront transmises au composant enfant, mais pas l'inverse. La modification de la valeur prop d'un composant enfant ne sera pas transmise au composant parent pour mettre à jour la vue. Alors, comment les composants enfants communiquent-ils avec les composants parents ?

C'est un événement personnalisé. En écoutant l'événement personnalisé dans $on(eventName) du composant parent, lorsque $emit(eventName) dans le composant enfant déclenche l'événement personnalisé, le composant parent effectue l'opération correspondante.

Par exemple, si vous contrôlez l'affichage d'un sous-composant contextuel dans le composant parent, après avoir appuyé sur Fermer dans le sous-composant, dites au composant parent de le masquer, puis le composant parent le fera effectuez l'opération pour masquer la boîte de dialogue.

<template><div class="app">// hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
        // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from &#39;./dialog.vue&#39;;export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>

Dans la boîte de dialogue du composant enfant.vue :

<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: [&#39;isShow&#39;],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit(&#39;hide&#39;);}}}</script>

Cela permet une communication mutuelle entre les composants parent et enfant.

Vuex

Les exemples ci-dessus sont tous basés sur les composantes de la relation parent-enfant, mais pour d'autres niveaux de relations, c'est plus lourd à mettre en œuvre. Vuex peut alors mieux vous aider à communiquer entre différents composants en temps réel. Concernant Vuex, vous pouvez consulter mon autre article : Vuex modularise la gestion des statuts des tâches à faire

Résumé

La communication des composants ne nécessite pas nécessairement l'utilisation de Vuex pour un simple transfert de données. , l'accessoire peut également être complété. Cet article enregistre principalement quelques points de connaissances de base sur le passage des paramètres des composants. Pour la pratique réelle, vous pouvez vous référer au bloc-notes comme exemple. Utilisez prop pour afficher et masquer les sous-composants et utilisez vuex pour implémenter la gestion de l'état des données entre les composants.

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!