vue中的props物件

2021-10-12 07:56:13 字數 1606 閱讀 1705

1.props物件的定義

props其實是properties的縮寫,props物件是用來定義屬性的。props物件可以接受陣列形式的引數又或者是物件形式的引數。

陣列形式

props:

['title'

,'likes'

,'ispublished'

,'commentids'

,'author'

]

物件形式

在物件形式中,可以指定該屬性的型別,這些 property 的名稱和值分別是 prop 各自的名稱和型別。

props:

2.關於屬性的命名方法 (駝峰命名法)

根據官方解釋,html 中的 attribute 名是大小寫不敏感的,所以瀏覽器會把所有大寫字元解釋為小寫字元。這意味著當你使用 dom 中的模板時,camelcase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名:

vue.

component

('blog-post'

,)

在html中使用給元件的屬性賦值時就需要這樣:

這個官方案例可以很清晰得看到posttitle------>post-title

3. props值的傳遞

這個很容易理解,props中對應的屬性是對應html中的attribute變數的,所以我們可以這樣傳遞值:

4.元件間資料的傳遞

props經常用來將父元件的資料傳遞到子元件,這個實現十分簡單,就是通過v-bind繫結屬性在將父元件中的資料傳遞到子元件中。

下面**或許有點亂,但沒關係,我一步步解讀:

定義了乙個父元件father-node,並且data中定義乙個名為count的資料。

定義了乙個子元件child-node,在props中定義了乙個count屬性。

在父元件的模板中我們使用了子元件child-node,並通過v-bind將father-node中名為count的資料傳遞給了child-node的count屬性。

然後,我們將child-node的count屬性值賦給了child-node的data中的child-count資料,並進行了展示。

資料流長這樣:父元件的data------->子元件的props--------->子元件的data

為什麼這樣傳呢?

每次父級元件發生變更時,子元件中所有的 prop 都將會重新整理為最新的值。這意味著你應該在乙個子元件內部改變 prop。如果你這樣做了,vue 會在瀏覽器的控制台中發出警告。所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結:父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態,從而導致你的應用的資料流向難以理解。

props寫法 Vue中props的用法知識點

vue中props的詳解 看一下官方文件 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。父元件的資料需要通過 prop 才能下發到子元件中。也就是props是子元件訪問父元件資料的唯一介面。詳細一點解釋就是 乙個元件可以直接在模板裡面渲染data裡面的資料 ...

props寫法 簡單理解vue中Props屬性

使用 props 傳遞資料 元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。prop 是元件資料的乙個字段,期望從父元件傳下來。子元件需要顯式地用 props 選項 宣告 props vue.component child...

Vue中Props 不可變狀態

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結 父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態,從而導致你的應用的資料流向難以理解。額外的,每次父級元件發生更新時,子元件中所有的 prop 都將會重新整理為最新的值。這意味...