老生常谈vue3组件通信方式

第老生常谈vue3组件通信方式目录vue3七种组件通信方式1.Props方式2.emit方式3.v-model方式4、Refs5.provide/inject6.eventBus7.vuex/pinia

vue3七种组件通信方式

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

propsemitv-modelrefsprovide/injecteventBusVuex4/pinia(vuex5)

1.Props方式

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

父组件的template中：

!--list是我们要传递的数据--

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

子组件：

template

liv-for="iinprops.list":key="i"{{i}}/li

/ul

/template

scriptsetup

import{defineProps}from'vue'

constprops=defineProps({

list:{

type:Array,

default:()=[],

/script

注意在

2.emit方式

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

父组件的template中：

!--add是子组件要传递的动作,handleAdd是监听到之后执行的事件--

child-components@add="handleAdd"/child-components

script

constlist=ref([1,2,3])

consthandleAdd=value={

list.value.push(value)

/script

子组件中：

constemits=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方法的第二个参数即可，如：

constemits=defineEmits(['update:list'])

emits('update:list',arr)

4、Refs

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

父组件如下：

template

div

Childref="child"/Child

button@click="show"ShowChildMessage/button

/div

/template

scriptsetup

import{getCurrentInstance}from'@vue/runtime-core';

importChildfrom'./Child.vue';

constcurrentInstance=getCurrentInstance()

functionshow(){

currentInstance.$refs.child.alertMessage()

/script

子组件代码如下：

template

div

h1{{message}}/h1

/div

/template

scriptsetup

import{ref}from'@vue/reactivity';

letmessage=ref('我是子元素').value

constalertMessage=function(){

alert(message)

defineExpose({

message,

alertMessage

/script

注意⚠️，通过scriptsetup语法糖的写法，其组件是默认关闭的，也就是说如果是通过$refs或者$parents来访问子组件中定义的值是拿不到的，必须通过defineExpose向外暴露你想获取的值才行。

5.provide/inject

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

//父组件中

provide('list',list.value)

//子组件中

constlist=inject('list')

6.eventBus

Vue3中移