老生常談vue3組件通信方式

第老生常談vue3組件通信方式目錄vue3七種組件通信方式1.Props方式2.emit方式3.v-model方式4、Refs5.provide/inject6.eventBus7.vuex/pinia

vue3七種組件通信方式

面試題經(jīng)常會問到vue3組件間的通信方式，下文列舉了七種常見的通信方式。

propsemitv-modelrefsprovide/injecteventBusVuex4/pinia(vuex5)

1.Props方式

父組件以數(shù)據(jù)綁定的形式聲明要傳遞的數(shù)據(jù)，子組件通過defineProperty()方法創(chuàng)建props對象，即可拿到父組件傳來的數(shù)據(jù)。

父組件的template中：

!--list是我們要傳遞的數(shù)據(jù)--

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是監(jiān)聽到之后執(zhí)行的事件--

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不能嚴格成為數(shù)據(jù)的傳遞方式，其實只是減少了代碼量。

ChildComponentv-model:list="list"/

//等價于

ChildComponent:list="pageTitle"@update:list="list=$event"/

子組件需要emit一個叫update:xxx的事件，再把需要更新的響應式數(shù)據(jù)傳給emit方法的第二個參數(shù)即可，如：

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都可以實現(xiàn)父組件到子孫組件的數(shù)據(jù)傳遞。

//父組件中

provide('list',list.value)

//子組件中

constlist=inject('list')

6.eventBus

Vue3中移