How to communicate between Vue3 components? 10+ communication methods to share

VueHow to communicate between components? The following article will share with you more than ten Vue3 component communication methods. I hope it will be helpful to you!

##This article explains the basic usage of various communication methods of

Vue 3.2 components, and uses single file component

As we all know, a very important knowledge point in

Vue.js is component communication. Whether it is the development of business classes or component library development, each has its own communication method. [Related recommendations: vuejs video tutorial]

This article is suitable for:

• Readers who have a basic knowledge of

  Vue 3.

• Readers who plan to develop component libraries.

Knowledge points covered in this article:

• Props

##emits
expose / ref
Non-Props
v-model
slot
provide / inject
bus
getCurrentInstance
Vuex
Pinia

• ##mitt.js

• I will write a simple demo for all the knowledge points listed above. The purpose of this article is to let everyone know that these methods can be used, so it does not delve into every knowledge point.

It is recommended that readers follow this article to type the code, and then dig into various knowledge points according to the links given in this article.

The collection (learned) is your own!

Props

Parent component passes value to child component (abbreviation: parent to child)

Props Document

https:/ /v3.cn.vuejs.org/guide/component-props.html

Parent component

// Parent.vue

<template>
  <!-- 使用子组件 -->
  <Child :msg="message" />
</template>

<script setup>
import Child from &#39;./components/Child.vue&#39; // 引入子组件

let message = &#39;雷猴&#39;
</script>

Child component

// Child.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup>

const props = defineProps({
  msg: {
    type: String,
    default: &#39;&#39;
  }
})

console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props

</script>

The defineProps

API must be used in