vue.js2.0父组件监听子组件和调用子组件中的方法

最新推荐文章于 2024-08-06 10:28:17 发布

shenzhen_zsw

最新推荐文章于 2024-08-06 10:28:17 发布

阅读量4.2k

点赞数

分类专栏：【VUE】

本文链接：https://blog.csdn.net/shenzhen_zsw/article/details/81128236

版权

概述

vue.js2.0父组件点击触发子组件方法

父组件监听子组件

<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.