Vue3中常用的组件通信方式

目录

props

emit

v-model

vuex/pinia

provide/inject

eventBus

---

1.props

父组件以数据绑定的形式声明要传递的数据，子组件通过defineProperty()方法创建props对象，即可拿到父组件传来的数据

父组件中：

<child-components :list="list"></child-components>

子组件中：

<template>
  <ul>
    <li v-for="index in props.list" :key="index">{{ index }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

2.emit

emit是子传父

父组件中：

<child-components @add="handleAdd"></child-components>
<script>
 const list = ref([1,2,3])
 const handleAdd = value => {
  list.value.push(value)
}
</script>

子组件中：

const emits = defineEmits(['add'])
emits('add', 1)

3.v-model

v-model不能严格成为数据的传递方式，其实只是减少了代码量

父组件中：

<ChildComponent v-model:list="list" />
// 等价于
<ChildComponent :list="pageTitle" @update:list="list = $event" />

子组件中：

const emits = defineEmits(['update:list'])
emits('update:list', arr)

子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可

4.vuex/pinia

Vuex 和 Pinia 是 Vue 3 中的状态管理工具，使用这两个工具可以轻松实现组件通信

5.provide/inject

provide/inject是 Vue 中提供的一对 API，无论层级多深，API 都可以实现父组件到子孙组件的数据传递

// 父组件中
provide('list', list.value)

// 子组件中
const list = inject('list')

6.eventBus

Vue 3 中移除了 eventBus，但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter