直接上代码
<body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="incrementTotal"></button-counter> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1 this.$emit('ee', 'cc' ) } }, }) new Vue({ el: '#counter-event-example', data: { total: 'arg' }, methods: { incrementTotal: function (b) { this.total = b + '1'; } } }) </script> </body>
子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参,注意,父组件的事件处理函数直接写函数名即可,不要加(),参数直接传递到了父组件的methods的事件处理函数了。
结果
点击几次后变成
另外,写一个小拾遗。vue子组件用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
再说一个非常方便的v-ref
<body> <div id="parent"> <user-profile v-ref:profile></user-profile> </div> <script> Vue.component('user-profile', { template: '<span>{{ msg }}</span>', data: function () { return {msg: 123}; }, methods: { greet: function () { console.log('hhhhh'); } } }) var parent = new Vue({el: '#parent'}); var child = parent.$refs.profile; child.greet(); </script> </body>