总结 Vue3 的七种组件通信方式

下边例子全部采用的 <script setup> 这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由。

下面将总结如下七种组件通信方式：

• props

• emit

• v-model

• refs

• provide/inject

• eventBus

• vuex/pinia(状态管理工具) 

---

 下面例子均围绕这个demo来写：

 

 

一、Props方式

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。

根据上面的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 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = ''
}
</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 'vue'
const props = defineProps(