Vue 理解非prop特性

2022-05-08 18:45:09 字數 903 閱讀 6543

所謂非 prop 特性,就是指它可以直接傳入元件,而不需要定義相應的 prop。

儘管為元件定義明確的 prop 是推薦的傳參方式,元件的作者卻並不總能預見到元件被使用的場景。所以,元件可以接收任意傳入的特性,這些特性都會被新增到元件的根元素上。

例如,假設我們使用了第三方元件bs-date-input,它包含乙個 bootstrap 外掛程式,該外掛程式需要在input上新增data-3d-date-picker這個特性。這時可以把特性直接新增到元件上 (不需要事先定義prop):

bs-date-input>

新增屬性data-3d-date-picker="true"之後,它會被自動新增到bs-date-input的根元素上。

舉個例子:

1

<

div

id>

2<

my-comp

data-title

="learn vue"

class

="mycls"

style

="color:red;"

>

my-comp

>

3div

>

4<

script

>

5vue.component(

'my-comp

', );

8new

vue();

11script

>

說明:data-title,class,style就是非prop屬性,無需定義相應的prop,這些屬性都會被新增到元件的根元素上。

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

乙個非 prop 特性是指傳向乙個元件,但是該元件並沒有相應 prop 定義的特性。特性就會自動新增到根元素上 對於絕大多數特性來說,從外部提供給元件的值會替換掉元件內部設定好的值。所以如果傳入type text 就會替換掉type date 並把它破壞!class和style特性會稍微智慧型一些,...

Vue元件prop屬性

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

vue元件中prop屬性

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