Comment communiquer entre les composants vue3 ? Une brève analyse des méthodes de communication

Dans les projets que nous écrivons dans vue3, nous communiquerons tous entre les composants. En plus d'utiliser la source de données publique pinia, quelles méthodes API plus simples pouvons-nous utiliser ? Ensuite, je vous présenterai plusieurs façons de communiquer entre les composants parent-enfant et les composants enfant-parent.

1. Communication entre les composants parent-enfant

1.1 DefinProps

La première chose à laquelle nous pensons lorsque nous communiquons avec les composants parent-enfant est les accessoires Nous déclarons les accessoires acceptés dans le composant enfant, puis nous passons. dans les accessoires correspondants du composant parent La clé et la valeur, afin que nous puissions recevoir les attributs et les valeurs transmises du composant parent au composant enfant. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

L'implémentation spécifique est la suivante :

// children.vue
<template>
  <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="index">
        {{item}}
      </li>

  </ul>
</template>

<script setup>
import { defineProps } from &#39;vue&#39;;
const props = defineProps({
    list :{
        type: Array,
        default: () => {}
    }
})
</script>

// parent.vue
<template>
  <div class="parent-wrap">
      <input type="text" v-model="value" class="form-control" placeholder="请输入">
      <div class="input-group-append">
          <button class="btn btn-primary" @click="handleAdd">添加</button>
      </div>
  </div>
  <!-- child -->
  <childrenVue :list="list"></childrenVue>
</template>
<script setup>
import { ref } from &#39;vue&#39;;
import childrenVue from &#39;./children.vue&#39;;
const value = ref(&#39;&#39;)
const list = ref([&#39;javaScript&#39;, &#39;Html&#39;, &#39;CSS&#39;])
const handleAdd = () =>{
    list.value.push(value.value)
    value = &#39;&#39;
}
</script>

Comme le montre l'image ci-dessus, nous avons réalisé que le tableau de liste est passé du Le composant parent est affiché sur le composant enfant, vous permet également d'ajouter des données à la liste pour mettre à jour les données du sous-composant.

1.2 provide/inject

Quand nous avons fini de parler des accessoires, la deuxième chose que nous voulons introduire est une option combinée de vue3, provide et inject.

project est utilisé pour fournir des valeurs qui peuvent être injectées par les composants descendants, tandis que inject est utilisé pour déclarer les propriétés à mettre en correspondance et à injecter dans le composant actuel par correspondance à partir du fournisseur supérieur. Le code est implémenté comme suit :

// children.vue
<template>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
    </ul>
</template>
<script setup>
import { inject } from &#39;vue&#39;;
const list = inject(&#39;list&#39;)
</script>

// parent.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="请输入">
        <div class="input-group-append">
            <button class="btn btn-primary" @click="handleAdd">添加</button>
        </div>
    </div>
    <!-- child -->
    <childVue />
</template>
<script setup>
import childVue from "./child.vue";
const { ref, provide, readonly } = require("vue");
const value = ref(&#39;&#39;)
const list = ref([&#39;javaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
provide(&#39;list&#39;, readonly(list.value))
const handleAdd = () => {
list.value.push(value.value)
}
</script>

Comme le montre l'image ci-dessus, nous utilisons l'API provide pour fournir une clé de list et une valeur de list .value et définissez list, value sur un attribut en lecture seule pour empêcher le composant enfant de modifier la source de données du composant parent. Ensuite, notre API inject a reçu list et a réalisé la communication entre les composants parents et enfants. provide API向外提供了一个 key 为 list，值为list.value，同时将 list,value 设置成了只读属性，防止子组件修改父组件的数据源。然后我们 injectAPI接收了 list，实现了父子组件的通信。

2.子父组件通信

2.1 defineEmits

上面我介绍了两种父向子传值的方法，但在我们开发中，我们还会遇到子向父组件传值的情况，那我们该怎么解决呢？ 第一个方法就是vue3中的 defineEmits API，代码实现如下:

// children.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="请输入" />
        <div class="input-group-append">
            <button class="btn btn-primary" @click="handleAdd">添加</button>
        </div>
    </div>
</template>
<script setup>
const { ref, defineEmits } = require("vue");
const value = ref(&#39;&#39;)
const emits = defineEmits([&#39;add&#39;]) //父传子

  // 给父组件传一个函数
const handleAdd = () => {
    emits(&#39;add&#39;, value.value)
    value.value= &#39;&#39;
}
</script>

// parent.vue
<template>  
    <childVue @add=&#39;handleAdd&#39;/>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
    </ul>
</template>
<script setup>
import { ref } from &#39;@vue/reactivity&#39;;
import childVue from &#39;./child.vue&#39;;
const list = ref([&#39;javaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const handleAdd = (val) => {
    list.value.push(val)
}
</script>

如上图所示，我们在子组件上emit一个出了一个 add事件给父组件接收，同时在父组件上调用来执行添加的逻辑，再将 input的value变为空，实现了父组件向子组件传参。

2.2 v-model:xxx + emit

在介绍完 defineEmits后, 我们再来介绍一种与其有异曲同工之处的v-model:xxx + emit的方法，实现如下：

// children.vue
<template>
    <div class="parent-wrap">
        <input type="text" v-model="value" class="form-control" placeholder="请输入" />
        <div class="input-group-append">
            <button class="btn btn-primary" @click="handleAdd">添加</button>
        </div>
    </div>
</template>
<script setup>
const { ref, defineProps, defineEmits } = require("vue");
const value = ref(&#39;&#39;)
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
const emits = defineEmits([&#39;list&#39;])
  // 给父组件一点东西
const handleAdd = () => {
    // props.list.push(value.value)  //不建议直接修改props的值 把握不住数据源的流转
    const arr = props.list
    arr.push(value.value)
    emits(&#39;list&#39;, arr)
    value.value= &#39;&#39;
}

</script>

<template>  
    <childVue v-model:list="list" @list =&#39;add&#39;/>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
    </ul>
</template>
<script setup>
import { ref } from &#39;@vue/reactivity&#39;;
import childVue from &#39;./child.vue&#39;;
const list = ref([&#39;javaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const add =(val) => {
    console.log(val);
    console.log(list);
}
</script>

再和上面的defineEmits方法比较完以后，相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的list传给了子组件，再在子组件修改了父组件的数据源，同时再emit

2. Communication entre les composants enfant-parent

2.1 DefinEmits

J'ai introduit deux méthodes permettant au parent de transmettre des valeurs ​​ci-dessus. Mais dans notre développement, nous rencontrerons également des situations où l'enfant transmet des valeurs au composant parent, alors comment devrions-nous le résoudre ? La première méthode est l'API defineEmits dans vue3. L'implémentation du code est la suivante : rrreeerrreee

Comme le montre l'image ci-dessus, nous émettons envoyons un événement d'ajout au composant parent pour recevoir it , et en même temps, appelez-le sur le composant parent pour exécuter la logique ajoutée, puis changez la value de input en vide, réalisant ainsi le passage du composant parent paramètres au composant enfant. 🎜

2.2 v-model:xxx + submit🎜🎜Après avoir introduit defineEmits, introduisons un qui lui est similaire. La méthode de v- model:xxx + submit est implémenté comme suit : 🎜rrreeerrreee🎜🎜🎜Après l'avoir comparé avec la méthode defineEmits ci-dessus, je pense que tout le monde peut voir les similitudes entre les deux. Ici, nous passons d'abord la list du composant parent au composant enfant, puis modifions la source de données du composant parent dans le composant enfant, et en même temps emit retour au composant parent pour réaliser Le composant enfant transmet les valeurs au composant parent. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜

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!