vue 父元件向子元件傳值

2022-08-10 12:54:17 字數 1915 閱讀 3640

一、父元件向子元件傳值

其實該問題是說子元件如何訪問父元件的屬性和方法?那麼根據對元件化的理解,無非就是要解決兩個問題:

1、父元件如何將值傳給子元件?

2、子元件如何獲取父元件傳遞過來的值?

解讀vue示例**:

1、父元件向子元件傳值是通過「屬性繫結」的形式實現的(第2行)

2、子元件預設是無法訪問到父元件中的資料和方法的(如果去掉19行,18行是取不到資料的,瀏覽器還會報錯)

過程分析:

1、首先,第2行是引用子元件物件模板,通過屬性繫結的方式將父元件的msg繫結給自定義的屬性名稱parentmsg,這一步已經把父 元件的值傳給了子元件;

2、看**vue中是通過在子元件中定義props屬性,並將繫結的屬性名傳進去就可以獲取到父元件傳過來的值。

關鍵字:屬性繫結 、 props

注意:

1、子元件data裡面的資料是子元件私有的,可讀可寫。

2、組建中props種的資料都是通過父元件傳遞過來的,可讀不可寫。

134

56var vm = new

vue(,

11methods:{},

12//

定義子元件

13components:

17},

18 template:'',

19 props:['parentmsg']20}

21}

22 })

二、父元件向子元件傳遞方法

該問題可以理解為「子元件如何呼叫父元件的方法」,根據對父元件向子元件傳值過程的理解,該過程還是分為兩個步驟:

1、父元件如何將方法傳給子元件?

2、子元件如何獲取子元件傳過來的方法?

解讀vue示例**:

1、父元件通過「事件繫結機制」將方法傳給子元件。

2、子元件在methods屬性中用this.$emit('func')獲取父元件傳遞的方法。

過程分析:

1、首先在定義的vue物件例項中定義乙個show方法(第32行),然後我們通過components屬性將定義的子元件com2引用一下,在第2行以標籤的形式加以引用,在標籤裡面用事件繫結機制將show繫結給func,此時已成功將父元件的show方法傳遞給了子元件com2;

2、我們需要觸發並呼叫父元件傳遞過來的方法,在子元件com2的methods屬性中定義了點選事件方法,點選的時候通過this.$emit('func',this,sonmsg)獲取父元件的方法。

注意:

1、@func='show' 不是show(),表示將show()的引用直接給func,如果是show()表示將方法的結果給func,注意含義不一樣。

2、this.$emit(),$emit是觸發的意思,第乙個引數是父元件傳遞的方法名,從第二個引數開始可以傳遞額外的引數。

134

5678

910 11

12//

定義乙個字面量型別的元件模板物件

13var com2 =18}

19},

20methods:24}

25}2627

var vm = new vue(,

32methods:

37},

38components:

41 })

三、子元件通過事件呼叫向父元件傳值。

看**22行,子元件呼叫父元件方法的時候將this.sonmsg傳遞,然後在33行在show方法裡面傳參,35行就可以獲取值。(日後加以補充)

vue子元件向父元件傳值。

1 子,父元件相互傳值。話不多說直接上 父元件向子元件傳值就是通過子元件定義的props 子元件 父元件 import modal from components common modal modal.vue import timecontrol from components common tim...

Vue父元件向子元件傳值

元件例項定義方式,注意 一定要使用props屬性來定義父元件傳遞過來的資料 建立 vue 例項,得到 viewmodel var vm newvue components script 使用v bind或簡化指令,將資料傳遞到子元件中 msg son div 原理 父元件將方法的引用,傳遞到子元件內...

vue子元件向父元件傳值

原理 父元件向子元件傳方法,子元件想辦法呼叫改方法 通過 this.emit 觸發父元件穿過來的方法 把子元件的資料當做該方法的引數傳遞進去,父元件就拿到了實參,得到了資料 子元件每當點選自己身上的button按鈕,就會觸發自己身上的myclick事件,在自身myclick方法裡面通過 this.e...