<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父子组件通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <counter :count="0" @change="handleIncrease"></counter> <counter :count="1" @change="handleIncrease"></counter> <div>{{total}}</div> </div> <script type="text/javascript"> let counter = { props: [‘count‘], data() { return { number: this.count } }, template: ‘<div @click="handleClick">{{number}}</div>‘, methods: { handleClick() { this.number = this.number + 2 this.$emit(‘change‘, 2) } } } let vm = new Vue({ el: ‘#root‘, components: { counter }, data: { total: 1 }, methods: { handleIncrease(step) { this.total += step } } }) </script> </body> </html>
原文：https://www.cnblogs.com/Harold-Hua/p/11749184.html