Vue父元件向子元件傳值

2021-09-26 15:44:31 字數 1224 閱讀 2729

元件例項定義方式，注意：一定要使用props屬性來定義父元件傳遞過來的資料



// 建立 vue 例項，得到 viewmodel


var vm =


newvue(,


components:}}


);<


/script>
使用v-bind或簡化指令，將資料傳遞到子元件中：

>


"msg"


>


<


/son>


<


/div>
原理：父元件將方法的引用，傳遞到子元件內部，子元件在內部呼叫父元件傳遞過來的方法，同時把要傳送給父元件的資料，在呼叫方法的時候當作引數傳遞進去；

父元件將方法的引用傳遞給子元件，其中，getmsg是父元件中methods中定義的方法名稱，func是子元件呼叫傳遞過來方法時候的方法名稱

>


"getmsg"


>


<


/son>


<


/div>
子元件內部通過this.$emit('方法名', 要傳遞的資料)方式，來呼叫父元件中的方法，同時把資料傳遞給父元件使用

>


<


!-- 引用父元件 --


>


"getmsg"


>


<


/son>


<


!-- 元件模板定義 --


>


"x-template" id=


"son"


>


"button" value=


"向父元件傳值" @click=


"sendmsg"


/>


<


/div>


<


/script>


<


/div>


// 子元件的定義方式


vue.


component


('son',}


});// 建立 vue 例項，得到 viewmodel


var vm =


newvue(,


methods:}}


);<


/script>

vue子元件向父元件傳值。

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

vue子元件向父元件傳值

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

vue 子元件向父元件傳值

1.在子元件裡面定義，子元件用 emit 觸發事件，emit 第乙個引數為 自定義的事件名稱 第二個引數為需要傳遞的資料 this.emit myevent value 2.在父元件裡面通過在元件裡設定，父元件用v on 監聽子元件的事件，myevent是子元件中 emit 定義傳觸發事件名稱，ge...