vue 组件传值问题

Question

图片描述

在<tfoot>里面调用的Module,里面的tableList的值在<tbody>的tr里面的tableList里面获取不到数据。请问有什么方法呢，这个Module里面也只是tr里面的4 个按钮。怎么将Module里面的tableList的数据传到父界面里面

Answer 1

用 $on和$emit
例子：

<div id="counter-event-example">
  <p>{{ total }}</p>
   <!- on 监听事件 -!>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')//触发事件
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})