子传父 : 普通形式
作者:互联网
父组件 : <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>
标签:count,counter,子传父,default,形式,SubCounter,普通,export,methods 来源: https://www.cnblogs.com/qd-lbxx/p/16612672.html