vue子元件控制父元件資料 emit
阿新 • • 發佈：2021-02-04
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <Fa /> </div> <!-- 父元件 --> <template id="fa"> <div class="fa"> 父元件 <son @fafun="buy" /> </div> </template> <!-- 子元件 --> <template id="son"> <div class="son"> 子元件 <button @click="sonFun">sonBtn</button> </div> </template> <script> Vue.component('Fa', { template: "#fa", data () { return { } }, methods: { buy(num1, num2) { console.log('faFun', num1, num2) } } }) Vue.component('Son', { template: "#son", methods: { sonFun() { console.log('sonFun') // 引數1:自定義事件名 其他引數 this.$emit('fafun', 666, 888) // 子元件觸發父元件的方法 } } }) new Vue({ el: '#app', data: { } }) </script> </body> </html>```