Vue3中emits與attrs的區別有哪些

本篇內容主要講解“Vue3中emits與attrs的區別有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3中emits與attrs的區別有哪些”吧!

目錄

• 結論
  

• 實踐分析
  

• 擴展
  

結論

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

實踐分析

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

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

那么此時，打開控制臺，我們可以發現：

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

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

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

同時，我們點擊兩個按鈕，可以發現，fun和fun2方法都打印出了結果

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

擴展

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

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

• 當一個組件經常需要通過自定義事件和父組件通信時，可以使用emits

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

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

強烈建議使用 emits 記錄每個組件所觸發的所有事件。
這尤為重要，因為我們移除了 .native 修飾符。任何未在 emits 中聲明的事件監聽器都會被算入組件的 $attrs，并將默認綁定到組件的根節點上。

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

所以，如果需要區分自己的自定義事件和原生事件，最好還是使用emits來定義每一個組件觸發的事件。同時，其實所有的事件，只要不在emits中聲明，都會默認綁定在父組件的attrs上，并不僅限于自定義的事件。

到此，相信大家對“Vue3中emits與attrs的區別有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！