Méthode d'implémentation de la fonction de transfert de valeur du composant adjacent dans le document Vue

Vue, en tant que framework front-end populaire, doit souvent implémenter des fonctions de transfert de valeur entre les composants. Parmi eux, lorsque les valeurs des composants adjacents sont transférées, cela se réalise principalement en appelant la méthode du composant. Cet article présentera la méthode d'implémentation de la fonction de transfert de valeur de composant adjacent dans Vue.

1. Le composant parent transmet la valeur au composant enfant

Dans Vue, l'instruction v-bind est utilisée pour lier la valeur du composant parent au composant enfant. Le code d'implémentation spécifique est le suivant :

Dans le composant parent :

<template>
  <div>
    <child-component v-bind:data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  data: {
    parentData: 'Hello, Vue!'
  }
}
</script>

Dans le composant enfant :

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

Le code ci-dessus transmet les données du composant parent parentData via v- bind:data Lier à l'attribut data du composant enfant. parentData 通过 v-bind:data 绑定到子组件的 data 属性中。

2.子组件向父组件传递值

在Vue中，子组件需要通过 $emit 方法向父组件发送一个事件。在父组件中注册该事件，并在回调函数中处理子组件发送的数据。具体实现代码如下：

在父组件中：

<template>
  <div>
    <child-component v-on:send-data="handleChildData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    }
  }
}
</script>

在子组件中：

<template>
  <div>
    <button v-on:click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello, Parent!');
    }
  }
}
</script>

上述代码中，子组件通过 v-on:click 绑定 sendDataToParent 方法，在方法中通过 $emit 方法向父组件发送事件 send-data 并传递数据 Hello, Parent! 。在父组件中，通过 v-on:send-data 注册事件 send-data 的回调函数 handleChildData ，并在函数中处理子组件传回的参数。

3.兄弟组件之间传递值

兄弟组件之间传递数据时，需要通过父组件作为中间桥梁。具体实现代码如下：

在父组件中：

<template>
  <div>
    <brother-component1 v-on:update-data="handleBrotherData"></brother-component1>
    <br>
    <brother-component2 v-bind:data="parentData"></brother-component2>
  </div>
</template>

<script>
import brotherComponent1 from './brotherComponent1.vue';
import brotherComponent2 from './brotherComponent2.vue';
export default {
  components: {
    brotherComponent1,
    brotherComponent2
  },
  data: {
    parentData: ''
  },
  methods: {
    handleBrotherData(data) {
      this.parentData = data;
    }
  }
}
</script>

在子组件1中：

<template>
  <div>
    <button v-on:click="sendDataToBrother">向兄弟组件2传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToBrother() {
      this.$emit('update-data', 'Hello, Brother 2!');
    }
  }
}
</script>

在子组件2中：

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

上述代码中，子组件1向父组件发送事件 update-data 并传递数据 Hello, Brother 2! ；父组件中监听该事件 v-on:update-data 并在函数中处理数据 handleBrotherData ，并将处理后的数据通过 v-bind:data 绑定到子组件2的 data

2. Le composant enfant transmet la valeur au composant parent

Dans Vue, le composant enfant doit envoyer un événement au composant parent via la méthode $emit. Enregistrez l'événement dans le composant parent et traitez les données envoyées par le composant enfant dans la fonction de rappel. Le code d'implémentation spécifique est le suivant : 🎜🎜Dans le composant parent : 🎜rrreee🎜Dans le composant enfant : 🎜rrreee🎜Dans le code ci-dessus, le composant enfant lie sendDataToParent via v-on :click code> méthode, dans laquelle l'événement send-data est envoyé au composant parent via la méthode $emit et les données sont transmises Bonjour, Parent !. Dans le composant parent, enregistrez la fonction de rappel handleChildData de l'événement send-data via v-on:send-data et gérez l'enfant dans la fonction Paramètres renvoyés par le composant. 🎜🎜3. Transfert de valeurs entre composants frères🎜🎜Lors du transfert de données entre composants frères, vous devez utiliser le composant parent comme pont intermédiaire. Le code d'implémentation spécifique est le suivant : 🎜🎜Dans le composant parent : 🎜rrreee🎜 Dans le composant enfant 1 : 🎜rrreee🎜 Dans le composant enfant 2 : 🎜rrreee🎜Dans le code ci-dessus, le composant enfant 1 envoie l'événement mettre à jour les données du composant parent et transmettre les données Bonjour, Brother 2 ! ; le composant parent écoute l'événement v-on:update-data ; et traite les données dans la fonction handleBrotherData, et lie les données traitées à l'attribut data du sous-composant 2 via v-bind:data. 🎜🎜En résumé, la méthode d'implémentation des fonctions de transmission de valeurs des composants adjacents dans Vue est principalement complétée par la liaison de valeurs et la communication d'événements entre les composants parents et enfants. Le composant parent sert de pont intermédiaire entre les composants frères. Cette méthode est simple, facile à comprendre, flexible et pratique, et constitue une méthode de communication de composants très importante dans 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!