Vue props父元件向子元件傳值詳解

2022-03-11 23:17:45 字數 1565 閱讀 6529

vue官網上可以說有我們想要的一切,先貼上通過prop傳值的官網位址:通過prop向子元件傳遞資料

prop是什麼?

prop是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個prop特性的時候,它就變成了那個元件例項的乙個屬性

從這句話上面我們能看出兩點

1、prop是寫在元件上的。

2、把父元件的乙個值傳給子元件時,這個值通過prop轉化成了這個子元件例項的乙個屬性。

不理解第二句話沒關係,看下面例子。

基礎--靜態傳值

1、首先建立乙個vue例項

2、註冊乙個元件(這樣註冊元件的方式是全域性註冊),還記得我們第一句話嗎?prop是在元件上的。因為可以是多個,所以是props。

在props上宣告的是title,在我們的template模板中使用的都是它。

3、使用元件。

<

div

id>

<

props-component

title

="props so easy"

>

props-component

>

div>

這只是乙個非常簡單的靜態傳值,可在實際中我們幾乎不用靜態傳值。

高階--動態傳值

我剛學習vue的時候,一直不知道props的流程到底是怎麼樣的,也就是我是先建立元件,還是先宣告乙個vue例項等等。流程很重要,

也可以說這種思想很重要。

說下我的理解:

1、首先我們應當知道自己建立的元件裡面是什麼標籤啊之類的。我應用到哪個地方?具體模板應該是什麼樣子的?

就像我們上面例子中的這個最簡單的模板。

<

div>}

div>

2、宣告元件上的props。

3、例項上的data值應當和props宣告的值對應。

看下面的例子:

場景:我想寫乙個頁面的header標籤元件。

第一步:

//

第一步:宣告vue

let vm = new

vue(

});

第二步:這個元件應當長什麼樣子?

//

第二步:建立元件

vue.component('my-header', )

第三步:宣告headerlist(其實熟練的話,這步驟完全省略了)

let vm = new

vue(

});

第四步:使用元件 :lists="headerlist"

lists是我們在元件中props宣告的,headerlist是我們在根例項中宣告的屬性

header :lists="headerlist">

這樣就是乙個最簡單的元件傳值了。

打完收工

父元件向子元件傳遞資料 14 父元件向子元件通訊

1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說,父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...

Vue props向子元件中傳遞資料

1 在宣告元件物件中使用 props 選項指定 const mycomponent 方式一 指定傳遞屬性名,注意是陣列形式。props id name sarlary ispublished 方式二 指定屬性名和資料型別,注意是物件形式。props 方式三 指定屬性名 資料型別 必要性 預設值。pr...

子元件向父元件傳值

子向父傳值 子元件像父元件傳值的本質就是,父向子傳遞方法,子呼叫這個方法,同時把 資料當作引數 傳遞給這個方法 父元件 goodsinfo.vue 子元件 goodsinfo numbox.vue 1.goodsinfo.vue 操作 1.匯入子元件 import numbox from compo...