attrs和inheritAttrs的聯合使用

2021-10-14 04:49:20 字數 711 閱讀 6027

inheritattrs :預設值是true,如果是true的話,預設情況下父作用域的不被認作 props 的 attribute 繫結 (attribute bindings) 將會「回退」且作為普通的 html attribute 應用在子元件的根元素上,

即父元件傳的屬性會綁到子元件根元素上,如果設定成false,則回禁止這種行為。

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

例:

說明:1.由於inheritattrs設定為false,子元件的根元素沒有繫結到根元素上,

設定成true時:

2.$attrs在顯示的時候,沒有顯示value,是因為$attrs不包括props裡的屬性

inheritAttrs和 attrs的使用

index.html v bind class class1 v bind style v bind test1 test1 test2 test2 placeholder placeholder test3 test input div index.js vue.component test in...

父子元件通訊 attrs

前言 父子元件通訊一般都使用的是props,但是隨著元件巢狀的複雜,props使用起來也許過於繁瑣,下面介紹下 attrs 的使用方法。包含了父作用域中不作為 prop 被識別 且獲取 的特性繫結 class 和 style 除外 當乙個元件沒有宣告任何 prop 時,這裡會包含所有父作用域的繫結 ...

元件傳值之 attrs

論vue元件傳值之 attrs 一 當前為祖父元件,傳值方式還是按照之前的傳值方式一樣。數字 p 城市 p city test div template import test from test export default 方式1 provide 方式2 provide data script ...