Vue子元件向父元件傳data資料

2021-09-21 18:30:48 字數 1086 閱讀 7107

在vue中,子元件是怎麼向父元件傳自己的data資料?

原理:父元件可以通過給子元件繫結 虛擬事件 來向子元件傳遞自己的方法,因此這個虛擬事件就裝載了父元件的方法,子元件拿到虛擬事件之後進行註冊,就可以使用來自父元件的方法了,因此,只需要向虛擬事件傳遞引數,那麼就相當於向父元件的方法傳遞引數,而父元件也因此拿到了來自子元件的資料。

說那麼多,直接上**:(按照資料傳遞的流動方向)

// 1. 建立乙個子元件com1

// 2. 父元件通過給子元件繫結虛擬事件sonme,來向子元件傳遞 fatherme() 方法

// 3. 子元件拿到虛擬事件sonme之後,使用 this.$emit() 進行註冊,第乙個引數就是要註冊的 虛擬事件,例如註冊了sonme

註冊虛擬事件之後,就相當於子元件拿到了父元件傳遞過來的 fatherme() 方法

// 4. 向父元件的方法傳遞引數,this.$emit() 的第二個引數就是 要傳遞的引數

因為要傳遞子元件的data資料,因此第二個引數填的就是子元件的data資料,例如傳遞子元件的私有資料 sonmsg

// 5. 這個時候父元件的方法已經拿到了來自子元件的data資料(sonmsg)

父元件可以定義乙個data資料 fathermsg 來接收來自子元件的資料 sonmsg

把 fatherme() 方法獲取的引數(即子元件的data私有資料 sonmsg)賦值給 fathermsg,那麼父元件就可以拿到子元件的data資料了

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...