Sharing useful information: 7 ways to communicate with Vue3 components!

Component is the core function of Vue and is a reusable vue instance; however, the scopes of component instances are independent of each other, which means that data between different components cannot directly reference each other. So, how to relate data between components? How to communicate and transfer data? The following article will share with you seven component communication methods. I hope it will be helpful to you!

##This article adopts the combined API writing method

. If you need to expose it, you need to expose it through ****defineExpose**** API**. 5. Provide/inject method

provide

and

inject are a pair of APIs provided in Vue. This API can implement the parent component to the child Components pass data, no matter how deep the level is, through this pair of APIs. The sample code is as follows: Parent component

<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>

Child component

<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>

It is worth noting that

when using

provide

for data transfer, Try to readonly wrap the data to prevent child components from modifying the data passed by the parent. <h2 data-id="heading-7">6. Event bus</h2> <p>The event bus has been removed from Vue3, but it can be accomplished with the help of third-party tools. Vue officially recommends <a href="https://www.npmjs.com/package/mitt" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">mitt</a> or <a href="https://www.npmjs.com/package/tiny-emitter" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">tiny-emitter</a>；</p> <p>In most cases, it is not recommended to use the global event bus to implement component communication. Although it is relatively simple and crude, maintaining the event bus is a big problem in the long run, so I will not explain it here. For details, you can read the documentation of the specific tool </p> <h2 data-id="heading-8">7. State management tools </h2> <p><a href="https://vuex.vuejs.org/zh/" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">Vuex</a> and <a href="https://pinia.vuejs.org/" target="_blank" rel="nofollow noopener noreferrer" ref="nofollow noopener noreferrer">Pinia</a> are state management tools in Vue3. Use this The two tools can easily realize component communication. Since these two tools are relatively powerful, they will not be shown here. For details, you can check the documentation</p> <h2 data-id="heading-9">Written at the end</h2> <p>That’s it for this article It's over. Generally speaking, it is relatively simple and there is nothing complicated. </p> <p>If this article is of some use to you, please like, comment, and collect it to avoid not being able to find it when you need it. </p> <p>If there are any errors in the article, please correct me~</p> <blockquote> <p>Original address: https://juejin.cn/post/7062740057018335245</p> <p>Author: Yiwan Zhou</p> </blockquote> <p>(Learning video sharing: <a href="https://www.php.cn/course/list/1.html" target="_blank">web front-end tutorial</a>)</p>