vue元件之Prop屬性

2021-10-10 07:04:11 字數 2058 閱讀 6169

一般頁面元素是有屬性的，如a標籤有href等屬性，同樣vue中元件也是有屬性的。在vue元件中想要使用屬性，首先需要在元件內部定義一些屬性，這些屬性在vue中被為prop，在元件中通過props選項中定義。

props的型別

在vue元件中，props選項的型別可以是乙個字串陣列，也可以是乙個物件。如下：

vue.


component


('postitem',)


vue.


component


('postitem2',,


template:''}


)
當以物件形式存值時，物件的稱和值分別是 prop 各自的名稱和型別，型別可以是string、number、boolean、array、object、function、promise 等值

props的靜態傳值

>


post-title


="這個是vue元件"


>


post-item


>


div>


>


vue.


component


('postitem',)


let vm =


newvue()


script


>
從上述案例中，我們可以得出props選項中定義的prop可以當成該元件例項的資料屬性來使用，渲染效果如下：

props的動態傳值

>


"arr"


>


<


/post-item>


<


/div>


vue.


component


('postitem',)


let vm =


newvue(}


)<


/script>
在上述例項中我們通過vue例項定義了arr陣列，然後動態的將arr中的資料傳輸給元件的posttitle，這樣就實現了資料的動態傳輸。

props的驗證

當元件的props選項是以物件形式宣告時，可以對props中的每乙個屬性進行驗。

vue.


component


('my-component',,


// 帶有預設值的數字


propd:


,// 帶有預設值的物件


prope:}}


,// 自定義驗證函式


propf:}}


})
在驗證過程中，我們可以指定乙個或多個資料型別，可以設定預設值，可以設定必填項，可以設定自定義驗證函式。在vue開發版本中，如果驗證失敗則會在控制台丟擲乙個警告

非prop屬性

什麼叫非prop屬性呢，在使用元件的使用我們傳入了沒未在prop元件中定義的prop屬性，這種prop屬性就是非prop屬性。當然元件也能接受非prop屬性的值，並且將其新增到元件的根元素上。

>


"arr"


class


="not_prop"


>


<


/post-item>


<


/div>


vue.


component


('postitem',)


let vm =


newvue(}


)<


/script>
在上述案例中，我們通過非prop屬性向元件傳遞了資料。因為傳遞過來的資料被新增到了元件的更節點上，可以通過inheritattrs: false，阻止新增。

如圖所示，我們在 元件的props選項中沒有定義class引數，而元件自動將引數新增到了根元素上。

Vue元件prop屬性

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

vue元件中prop屬性

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

vue元件 Prop傳遞資料

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