您好,登錄后才能下訂單哦!
vue2.x中怎么通過(guò)父組件監(jiān)聽(tīng)子組件事件并傳回信息,針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
利用vm.$emit
1、在父組件中引用子組件
<child @from-child-msg="listenChildMsg"></child >
2、子組件中使用$emit發(fā)送事件
this.$emit('from-child-msg', '這是子組件傳遞的消息');
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } input, select { height: 30px; } </style> </head> <body> <div id="app"> <child value="name" @msg-from-child="getMsgFromChild"></child> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> <script> Vue.component('child', { data: function () { return { val: this.value } }, props: ['value'], methods: { handleClick () { this.$emit('msg-from-child', this.val) } }, template: ` <div><input type="text" v-model="val"><button type="button" @click="handleClick">確定</button></div> ` }) new Vue ({ el: '#app', data: { }, methods: { getMsgFromChild (v) { alert('msg: ' + v) } } }) </script> </body> </html>
關(guān)于vue2.x中怎么通過(guò)父組件監(jiān)聽(tīng)子組件事件并傳回信息問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。