目錄

• 結論
  
• 實踐分析
  
• 擴充套件
  
• 總結

結論

當在父元件自定義事件，若沒有在子元件中宣告時，將自動繫結在父元件的$attrs上；而當在子元件宣告時，則不會在父元件的$attrs上出現

實踐分析

為www.cppcns.com了驗證emits和attrs的區別，我們構造這樣的元件結構

<div>
<com-one-/>
</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區別的文章就介紹到這了,更多相關Vue3中emits與attrs區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！