$attrs和$listeners的常見用法

2.4.0 新增

1. vm.$attrs

官方介紹: 包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 繫結 (class 和 style除外)。當一個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過v-bind="$attrs" 傳入內部元件——在建立高級別的元件時非常有用。

如果父傳子有很多值,那麼在子元件需要在props中定義多個值來接受父元件中傳遞過來的值;而$attrs則可以直接獲取未在 props 定義的值.

子元件中未定義props,會列印父元件中傳過來的值.

// 父元件
<home title="標題" :num="80" :status="false" :data="{type: 1}"/>

// 子元件
mounted() {
	console.log(this.$attrs) // { title: "標題", num: 80, status: false, data: {type: 1} }
},

相對應的如果子元件定義了 props,列印的值就是剔除定義的屬性

props: { 
	title: {
		type: String,
		default: ''  
	}
},

mounted() {
	console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }
},

2. vm.$listeners

官方介紹: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部元件——在建立更高層次的元件時非常有用。

子元件需要呼叫父元件的方法可以通過$listeners

// 父元件
<home @change="change"/>

// 子元件
mounted() {
	console.log(this.$listeners) // 即可拿到 change 事件
}

注: 如果是孫元件要訪問父元件的屬性和呼叫方法,可以按照上述介紹的方法一級一級傳下去就可以

3. inheritAttrs

官方介紹: 預設情況下父作用域的不被認作 props 的 attribute 繫結 (attribute bindings) 將會“回退”且作為普通的 HTML attribute 應用在子元件的根元素上。當撰寫包裹一個目標元素或另一個元件的元件時，這可能不會總是符合預期行為。通過設定 inheritAttrs 到 false，這些預設行為將會被去掉。而通過 (同樣是 2.4 新增的) 例項 property $attrs 可以讓這些 attribute 生效，且可以通過 v-bind 顯性的繫結到非根元素上。
注意：這個選項不影響 class 和 style 繫結

inheritAttrs預設值為true，true的意思是將父元件中除了props外的屬性新增到子元件的根節點上;
```
props: { 
	title: {
  			type: String,
   		default: ''  
   	}
},

// 此時inheritAttrs預設為true

mounted() {
	console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }
},
```
此時元件內未被註冊的屬性將作為普通html元素屬性被渲染

在元件定義中新增inheritAttrs：false，屬性就不會顯示在根節點上了

props: { 
	title: {
  			type: String,
   		default: ''  
   	}
},

inheritAttrs: false,

mounted() {
	console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }
},

元件將不會把未被註冊的props呈現為普通的HTML屬性

注: 在子元件裡我們依然可以通過其$attrs可以獲取到沒有使用的註冊屬性

$attrs和$listeners的常見用法

2.4.0 新增

相關推薦