Partager des informations utiles : 7 façons de communiquer avec les composants Vue3 !

Component est la fonction principale de Vue et est une instance de Vue réutilisable ; mais 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 directement. Alors, comment relier les données entre les composants ? Comment communiquer et transférer des données ? L'article suivant partagera avec vous sept méthodes de communication composantes. J'espère qu'il vous sera utile !

Cet article adopte la méthode d'écriture d'API combinée de <configuration du script></configuration> Par rapport au type d'option, la méthode d'écriture d'API combinée est plus pratique, gratuite. pour plus de détails, veuillez vous référer à La documentation Vue décrit les deux méthodes. <script setup></script>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。

注：php中文网线上班也开始教授最新版本的vue课程了，感兴趣的朋友可以了解学习。

本篇文章将介绍如下七种组件通信方式：

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia(状态管理工具)

开始搞事情~

举一个栗子

俗话说的好，学习不写demo，那就是耍流氓~

本篇文章将围绕下面这个demo，如下图所示：

上图中，列表和输入框分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。

1、Props方式

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。【相关推荐：vue.js视频教程】

根据上面的demo，我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染；

父组件代码如下：

<template>
  <!-- 子组件 -->
  <child-components :list="list"></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子组件只需要对父组件传递的值进行渲染即可，代码如下：

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

2、emit方式

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；

根据上面的demo，我们将列表定义在父组件，子组件只需要传递添加的值即可。

子组件代码如下：

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

在子组件中点击【添加】按钮后，emit一个自定义事件，并将添加的值作为参数传递。

父组件代码如下：

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
// add 触发后的事件处理函数
const handleAdd = value => {
  list.value.push(value)
}
</script>

在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。

3、v-model方式

v-model是Vue中一个比较出色的语法糖，就比如下面这段代码

<ChildComponent v-model:title="pageTitle" />

就是下面这段代码的简写形势

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model确实简便了不少，现在我们就来看一下上面那个demo，如何用v-model实现。

子组件

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits([&#39;update:list&#39;])
// 添加操作
const handleAdd = () => {
  const arr = props.list
  arr.push(value.value)
  emits(&#39;update:list&#39;, arr)
  value.value = &#39;&#39;
}
</script>

在子组件中我们首先定义props和emits，然后添加完成之后emit指定事件。

注：update:*是Vue中的固定写法，*表示props中的某个属性名。

父组件中使用就比较简单，代码如下：

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components v-model:list="list"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
</script>

4、refs方式

在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

示例代码如下：

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in childRefs?.list" :key="i">
      {{ i }}
    </li>
  </ul>
  <!-- 子组件 ref的值与<script>中的保持一致 -->
  <child-components ref="childRefs"></child-components>
  <!-- 父组件 -->
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const childRefs = ref(null)
</script>

子组件代码如下：

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineExpose } from &#39;vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
defineExpose({ list })
</script>

setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**<script setup>中声明的绑定。如果需要公开需要通过****defineExpose**** API暴露**。

5、provide/inject方式

provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。示例代码如下所示：

父组件

<template>
  <!-- 子组件 -->
  <child-components></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, provide } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// 向子组件提供数据
provide(&#39;list&#39;, list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子组件

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { inject } from &#39;vue&#39;
// 接受父组件提供的数据
const list = inject(&#39;list&#39;)
</script>

值得注意的是使用provide进行数据传递时，尽量readonly

Remarque : le le travail en ligne de chinois php a également commencé à enseigner la dernière version des cours vue. . Les amis intéressés peuvent en savoir plus.

🎜Cet article présentera les sept méthodes de communication de composants suivantes : 🎜

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia (outil de gestion d'état)

🎜Commencez à faire les choses~🎜Donnez-moi un exemple🎜Comme dit le proverbe, si vous n'écrivez pas de démos lors de l'apprentissage, vous agissez comme un voyou~🎜🎜Cet article se concentrera sur les points suivants démo, comme le montre l'image ci-dessous :🎜 🎜🎜🎜Image ci-dessus, List et Input Box sont respectivement des composants parent et enfant. En fonction des différentes méthodes de transfert de valeur, qui est le composant parent et qui est le composant enfant peut être ajusté. 🎜

1. Méthode Props

🎜La méthode Props est la méthode la plus courante de passage de père en fils🎜 dans Vue, elle est également relativement simple à utiliser. [Recommandations associées : tutoriel vidéo vue.js] 🎜🎜Selon la démo ci-dessus , Nous définissons les données et les opérations sur les données dans le composant parent, et le composant enfant ne restitue que la liste ; 🎜🎜Le code du composant parent est le suivant : 🎜rrreee🎜Le composant enfant n'a besoin que de restituer la valeur transmise par le parent ; composant, le code est le suivant : 🎜rrreee

2. Méthode Emit

🎜La méthode emit est également la méthode de communication de composant la plus courante dans Vue. .Cette méthode est utilisée pour sub- Pass to parent🎜；🎜🎜Selon la démo ci-dessus, nous définissons la liste dans le composant parent, et le composant enfant n'a besoin que de transmettre la valeur ajoutée. 🎜🎜Le code du sous-composant est le suivant : 🎜rrreee🎜Après avoir cliqué sur le bouton [Ajouter] dans le sous-composant, émettez un événement personnalisé et passez la valeur ajoutée en paramètre. 🎜🎜Le code du composant parent est le suivant : 🎜rrreee🎜Dans le composant parent, il vous suffit d'écouter les événements personnalisés du composant enfant, puis d'effectuer l'opération d'ajout correspondante. 🎜

3. méthode v-model

🎜v-model est un excellent sucre syntaxique dans Vue, comme le code suivant 🎜rrreee🎜 est l'abréviation du code ci-dessous🎜rrreee🎜v-model est en effet beaucoup plus simple. Jetons maintenant un coup d'œil à la démo ci-dessus et comment utiliser v-model pour l'implémenter. 🎜🎜Sous-composant🎜rrreee🎜Dans le sous-composant, nous définissons d'abord props et emis, puis ajoutons l'événement emit spécifié. 🎜

🎜Remarque : update:* est une méthode d'écriture fixe dans Vue, et * représente un nom de propriété dans props. 🎜

🎜Il est relativement simple à utiliser dans le composant parent. Le code est le suivant : 🎜rrreee

4. API, nous pouvons transmettre this.$refs.name est utilisé pour obtenir l'élément ou le composant spécifié, mais cette méthode ne peut pas être utilisée dans l'API combinée. Si nous voulons obtenir un composant ou un élément via ref, nous devons définir un objet Ref du même nom, accessible une fois le composant monté. 🎜🎜L'exemple de code est le suivant : 🎜rrreee🎜Le code du sous-composant est le suivant : 🎜rrreee🎜Le composant setup est fermé par défaut, c'est-à-dire l'instance publique du composant obtenue via le modèle ref ,n'exposera aucune liaison 🎜 déclarée dans 🎜**<script setup></script>. Si vous avez besoin d'une 🎜exposition, vous devez l'exposer via l'API ****defineExpose****. 🎜

5. Méthode Provide/inject

🎜provide et inject sont une paire d'API fournies dans Vue. Cette API peut permettre aux composants parents de transmettre des données aux composants enfants, quelle que soit la profondeur du niveau, elle peut être implémentée via cette paire d'API. L'exemple de code est le suivant : 🎜🎜Composant parent🎜rrreee🎜Composant enfant🎜rrreee🎜Il convient de noter que lorsque utilisez provide pour le transfert de données, essayez de lecture seule pour le packaging des données afin d'empêcher les composants enfants de modifier les données transmises par le parent🎜. 🎜

6. Bus d'événements

Le bus d'événements a été supprimé de Vue3, mais cela peut être fait à l'aide d'outils tiers. Vue recommande officiellement mitt ou tiny-emitter ; dans la plupart des cas Bien que la méthode du bus soit relativement simple et grossière pour mettre en œuvre la communication entre les composants, la maintenance du bus d'événements est un gros problème à long terme, je ne l'expliquerai donc pas ici. Pour plus de détails, vous pouvez lire la documentation spécifique. outil

7. Outil de gestion d'état

Vuex

et Pinia sont des outils de gestion d'état dans Vue3. L'utilisation de ces deux outils peut facilement réaliser une communication entre les composants. Étant donné que ces deux outils sont relativement puissants, ils ne seront pas présentés ici. pour plus de détails, vous pouvez consulter la documentation écrite à la fin

Cet article se termine ici De manière générale, c'est relativement simple et il n'y a rien de compliqué.

Si cet article vous est utile, n'hésitez pas à l'aimer, à le commenter et à l'enregistrer pour éviter de ne pas pouvoir le retrouver lorsque vous en avez besoin.

S'il y a des erreurs dans l'article, veuillez me corriger~

Adresse originale : https://juejin.cn/post/7062740057018335245

Auteur : Yiwan Zhou

(Partage de vidéos d'apprentissage :

web front- fin du tutoriel

)