Vue在子元件中呼叫父元件的方法並傳參
阿新 • • 發佈：2019-02-16
1.在父元件 methods 中定義 show 方法，供子元件呼叫。
methods:{
show(data){
this.datamsgFormSon = data
console.log(this.datamsgFormSon)
}
},
2. 在引用子元件的時候，將 父元件的 show 方法傳遞給子元件。
使用的是事件繫結機制，v-on。
<com2 v-on:func="show"></com2>3. 定義子元件com2
在子元件的data中定義 sonmsg 屬性，定義 myclick 方法來呼叫父元件的方法。在呼叫的時候使用 $emit
var com2 = {
template:'#tmp1',
data(){
return{
sonmsg:{name:'小頭兒子',age:6}
}
},
methods:{
myclick(){
//當點選子元件的按鈕的時候，如何拿到父元件傳遞過來的func方法，並呼叫這個方法
//英文願意：是觸發，呼叫、發射的意思
this.$emit('func',this.sonmsg)
}
}
}完整程式碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app'> <!-- 父元件向子元件傳遞方法，使用的是事件繫結機制,v-on, 當我們自定義了一個事件屬性之後，子元件就能夠通過某些方式，來呼叫傳遞進去的這個方法了 --> <com2 v-on:func="show"></com2> </div> <template id="tmp1"> <div> <h1>這是子元件</h1> <input type="button" value="這是子元件中的按鈕，-點選它，觸發父元件傳遞過來的func方法" @click="myclick"> </div> </template> </body> <script src="../lib/vue.js"></script> <script> var com2 = { template:'#tmp1', data(){ return{ sonmsg:{name:'小頭兒子',age:6} } }, methods:{ myclick(){ //當點選子元件的按鈕的時候，如何拿到父元件傳遞過來的func方法，並呼叫這個方法 //英文願意：是觸發，呼叫、發射的意思 this.$emit('func',this.sonmsg) } } } var vm = new Vue({ el:'#app', data:{ datamsgFormSon:null }, methods:{ show(data){ this.datamsgFormSon = data console.log(this.datamsgFormSon); } }, components:{ com2, } }) </script> </html>