快捷導(dǎo)航

Vue3中emits與attrs的區(qū)別分析

更新時(shí)間：2021年10月09日 11:42:51 作者：AEI

這篇文章主要給大家介紹了關(guān)于Vue3中emits與attrs區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

結(jié)論

當(dāng)在父組件自定義事件，若沒有在子組件中聲明時(shí)，將自動(dòng)綁定在父組件的$attrs上；而當(dāng)在子組件聲明時(shí)，則不會(huì)在父組件的$attrs上出現(xiàn)

實(shí)踐分析

為了驗(yàn)證emits和attrs的區(qū)別，我們構(gòu)造這樣的組件結(jié)構(gòu)

<div>
<com-one-vue/>
</div>
<div>
<com-one-vue/>
</div>

其具體的Vue文件及代碼為(注意，以下語法均采用 setup語法糖 )：

App.vue

<template>
<div>
組件1（加上fun事件，但不在emits中聲明）
<com-one-vue @fun = 'call'/>
</div>
<div>
組件1（加上fun2事件，在emits中聲明）
<com-one-vue @fun2 = 'call'/>
</div>
</template>

<script setup>
import { provide, ref } from '@vue/runtime-core';
import comOneVue from './components/comOne.vue';
import comTwoVue from './components/comTwo.vue';
import comThreeVue from './components/comThree.vue';
const call = () => {
  console.log('xx')
}
</script>

comOne.vue

<template>
    <button @click="f">heihei</button>
</template>

<script setup>
import {useAttrs } from "@vue/runtime-core";
const emits = defineEmits(['fun2'])
const {onFun} = useAttrs()
const f = () => {
    if(onFun)
    onFun()
    emits('fun2')
}
console.log(useAttrs())
</script>

那么此時(shí)，打開控制臺(tái)，我們可以發(fā)現(xiàn)：

在兩個(gè)組件1中，由于第一個(gè)組件1的自定義方法fun沒有在emits中聲明，所以在其的$attrs上出現(xiàn)了onFun，其類型是一個(gè)方法。

而在第二個(gè)的組件1上,我們定義了自定義方法fun2，由于在一開始我們已經(jīng)在子組件中定義了fun2，所以在第二個(gè)組件1上沒有將fun2添加到$attrs上。

注意，這里雖然這兩個(gè)組件都是組件1，但是其的自定義事件是不會(huì)互相影響的，這也是fun自定義方法沒有出現(xiàn)在第二個(gè)組件1上的$attrs上的原因。

同時(shí)，我們點(diǎn)擊兩個(gè)按鈕，可以發(fā)現(xiàn)，fun和fun2方法都打印出了結(jié)果

所以，在這種情況下，這兩種用法帶來的效果是沒有什么不同的。

擴(kuò)展

通過剛才的Demo，我們了解了emits和attrs的用法差異和一些細(xì)節(jié)，但是在多數(shù)情況下，其實(shí)兩者的功能是沒有差異的，那么我們應(yīng)該如何使用呢？

首先，emits是首先在子組件聲明，父組件引用，而attrs則是先由父組件在子組件上自定義事件，子組件通過查看父組件的attrs來使用。這樣的差異讓我們可以根據(jù)一個(gè)事件的使用方式和特點(diǎn)來決定使用哪種方法：

當(dāng)一個(gè)組件經(jīng)常需要通過自定義事件和父組件通信時(shí)，可以使用emits
當(dāng)一個(gè)父組件可能需要通過自定義事件和子組件通訊且并不是經(jīng)常時(shí)，可以使用attrs。但是注意，由于父組件可能不會(huì)通過自定義事件和子組件通信，所以需要判斷是否存在相應(yīng)的attrs（不判斷會(huì)出現(xiàn)undefined的錯(cuò)誤）

再來看一下官方對(duì)這兩種用法的看法：

強(qiáng)烈建議使用 emits 記錄每個(gè)組件所觸發(fā)的所有事件。
這尤為重要，因?yàn)槲覀円瞥?.native 修飾符。任何未在 emits 中聲明的事件監(jiān)聽器都會(huì)被算入組件的 $attrs，并將默認(rèn)綁定到組件的根節(jié)點(diǎn)上。

在Vue3中，移除.native修飾符后，所有的事件其實(shí)都會(huì)記錄在都組件的attrs上，無論是不是自定義組件。如下：