子传父 : 普通形式
父组件 : <template> <div class="app"> <h2>当前计数: {{ counter }}</h2> <!-- 并且监听内部的sub事件 --> <sub-counter @sub="subBtnClick"></sub-counter> </div> </template> <script> import SubCounter from './SubCounter.vue' export default { components: { SubCounter }, data() { return { counter: 0 } }, methods: { subBtnClick(count) { this.counter -= count } } } </script> <style scoped> </style>
子组件 : <template> <div class="sub"> <button @click="btnClick(1)">-1</button> <button @click="btnClick(5)">-5</button> <button @click="btnClick(10)">-10</button> </div> </template> <script> export default { methods: { btnClick(count) { this.$emit("sub", count) } } } </script> <style scoped> </style>
本文来自博客园,作者:杨建鑫,转载请注明原文链接:https://www.cnblogs.com/qd-lbxx/p/16612672.html