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

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

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

結論

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

實踐分析

為了驗證emits和attrs的區(qū)別，我們構造這樣的組件結構

<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>

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

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

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

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

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

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

擴展

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

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

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

再來看一下官方對這兩種用法的看法：