vue3组件通信方式

vue3七种组件通信方式

面试题经常会问到vue3组件间的通信方式，下文列举了七种常见的通信方式。

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• Vuex4/pinia(vuex5)

1. Props方式

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

父组件的template中：

<!-- list是我们要传递的数据 --><child-components:list="list"></child-components>

子组件：

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

注意在

2. emit方式

emit

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

父组件的template中：

<!-- add是子组件要传递的动作,handleAdd是监听到之后执行的事件 --><child-components@add="handleAdd"></child-components><script>const list =ref([1,2,3])consthandleAdd=value=>{
  list.value.push(value)}</script>

子组件中：

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

3. v-model方式

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

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

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

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

4、Refs

有时候想访问

    r
   
   
    e
   
   
    f
   
   
    s
   
   
    绑
   
   
    定
   
   
    的
   
   
    组
   
   
    件
   
   
    的
   
   
    属
   
   
    性
   
   
    或
   
   
    者
   
   
    方
   
   
    法
   
   
    ，
   
   
    我
   
   
    们
   
   
    会
   
   
    使
   
   
    用
   
  
  
   refs绑定的组件的属性或者方法，我们会使用
  
 
refs绑定的组件的属性或者方法，我们会使用refs。但是Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到**this**的，所以我们需要借助一个方法，那就是**getCurrentInstance**，该方法返回了当前的实例对象。

父组件如下：

<template><div><Childref="child"></Child><button@click="show">Show Child Message</button></div></template><scriptsetup>import{ getCurrentInstance }from'@vue/runtime-core';import Child from'./Child.vue';const currentInstance =getCurrentInstance()functionshow(){
    currentInstance.$refs.child.alertMessage()}</script>

子组件代码如下：

<template><div><h1>{{ message }}</h1></div></template><scriptsetup>import{ ref }from'@vue/reactivity';let message =ref('我是子元素').value
constalertMessage=function(){alert(message)}defineExpose({
    message,
    alertMessage
})</script>

注意⚠️，通过

<script setup>

语法糖的写法，其组件是默认关闭的，也就是说如果是通过

$refs

或者

$parents

来访问子组件中定义的值是拿不到的，必须通过defineExpose向外暴露你想获取的值才行。

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。

7. vuex/pinia

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