vue中元件非prop接收資料時的特性自定義繫結

2021-09-13 14:50:31 字數 861 閱讀 1012

乙個非 prop 特性是指傳向乙個元件,但是該元件並沒有相應 prop 定義的特性。

特性就會自動新增到根元素

對於絕大多數特性來說,從外部提供給元件的值會替換掉元件內部設定好的值。

所以如果傳入type="text"就會替換掉type="date"並把它破壞!

classstyle特性會稍微智慧型一些,即兩邊的值會被合併起來,

從而得到最終的值:form-control date-picker-theme-dark

inheritattrs: false可以關閉這個特性!(不會影響 style 和 class 的繫結)

通過$attrs可以讓非prop特性繫結到指定的元素上!(使用方法:在需要繫結的元素上v-bind="$attrs")

注意:如果該元素定義時有該屬性,則$attrs所傳的屬性不會替換或者修改原值。即:

這裡需要注意一點,通過 $attrs 指定給元素的屬性,不會與該元素原有屬性發生合併或替換,而是以原有屬性為準

$listeners$attrs類似,可以看做是乙個包含了元件上所有事件***(包括自定義事件、不包括.native修飾的事件)的物件。它也支援上述的寫法,適用於將事件安放於元件內指定元素上。(v-on="$listeners")

vue元件中prop屬性

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行。每次父級元件發生更新時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在乙個子元件內部改變 prop。在元件中修改 prop 傳遞過來的資料 vu...

vue元件 Prop傳遞資料

元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。prop 是單向繫結的 當父元件的屬性變化時,將傳導給子元件,但是不會反過來。這是為了防止子元件無意修改了父元件的狀態。每次父元件更新時,子元件的所...

Vue元件prop屬性

vue.component blog post post title hello 所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行。每次父級元件發生更新時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你...