Vue中子元件呼叫父元件的方法
阿新 • • 發佈:2018-11-03
Vue中子元件呼叫父元件的方法
相關Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue-2.4.0.js"></script> <style> </style> </head> <body> <div id="app"> <!--父元件可以在引用子元件的時候,通過屬性繫結的形式(v-bind:),--> <!--把需要傳遞給子元件的資料,以屬性繫結的形式傳遞到子元件中 給子元件使用--> <com2 @func="show"></com2> </div> <template id="temp1"> <div> <h1>這是子元件</h1> <input type="button" value="這是子元件按鈕 點選後觸發父元件的func方法" @click="myclick" > </div> </template> <script> var com2 = { template: '#temp1', data: function () { return { sonmsg: {name: '大頭兒子', age: 6} } }, methods: { myclick: function () { //當點選子元件的按鈕的時候如何拿到父元件的func方法 並呼叫 //$emit() 原意:觸發 //第二個引數可以傳參 this.$emit('func', this.sonmsg); console.log('ok'); } } } var vm = new Vue({ el: '#app', data: { datamsgFromSon: null }, methods: { show: function (data) { console.log("呼叫了父元件的func,並且data為:" + data); console.log(data); this.datamsgFromSon = data; } }, components: { com2: com2 } }); </script> </body> </html>