无法从子组件获取在父组件上执行的方法答案

【问题标题】：Can't get method to execute on parent component from child component无法从子组件获取在父组件上执行的方法
【发布时间】：2017-01-04 06:08:21
【问题描述】：

当单击其子组件之一中的按钮时，我正在尝试获取在父组件上执行的方法。我在 Webpack 中使用单个文件组件。下面是子组件的代码：

<template>
  <button v-on:click="add">Click</button>
</template>

<script>
export default {
  methods: {
    add: () => {
      console.log('foo')
      this.$dispatch('addClick')
    }
  }
}
</script>

以及父代的代码：

<template>
  <div id="app">
    <count :total="total"></count>
    <click></click>
  </div>
</template>

<script>
import count from './components/count.vue'
import click from './components/click.vue'

export default {
  components: {
    count,
    click
  },
  data: () => {
    return {
      total: 0
    }
  },
  methods: {
    addToTotal: () => {
      console.log('bar')
      this.total += 1
    }
  },
  events: {
    addClick: 'addToTotal'
  }
}
</script>

count 组件只是一个显示total 变量的 h1 元素。当我单击按钮时，“foo”会记录到控制台，但“bar”不会，总数也不会改变。关于我做错了什么的任何想法？提前致谢！

【问题讨论】：

您正在使用 lambda 表示法，这可能会弄乱您的 this。请改用function。

标签： javascript vue.js vue-component

【解决方案1】：

您正在为您的方法使用 lambda 表示法，这给了它们错误的this。如果你改用function，它会起作用。

Vue.component('click', {
  template: '#clicker',
  methods: {
    add: function() {
      console.log('foo')
      this.$dispatch('addClick')
    }
  }

})

new Vue({
  el: '#app',
  data: () => {
    return {
      total: 0
    }
  },
  methods: {
    addToTotal: function () {
      console.log('bar')
      this.total += 1
    }
  },
  events: {
    addClick: 'addToTotal'
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<template id="clicker">
  <button v-on:click="add">Click</button>
</template>

<div id="app">
  <count :total="total"></count>
  <click></click>
  {{total}}
</div>

【讨论】：

【解决方案2】：

在count 组件的total 属性上使用双向.sync 绑定类型修饰符，以便在更改父total 值时更新该值。这是一个例子：

Vue.component('click', {
    template: '<button v-on:click="add">Click</button>',
    methods: {
        add: function () {
            this.$dispatch('addClick');
        }
    }
});

Vue.component('count', {
    template: '<h1 v-text="total"></h1>',
    props: {
        total: {
            type: Number,
            twoWay: true
        }
    }
});

new Vue({
    el: '#app',
    data: {
        total: 1
    },
    methods: {
        addTotal: function () {
            this.total++;
        }
    },
    events: {
        addClick: 'addTotal'
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>

<div id="app">
    <count :total.sync="total"></count>
    <click></click>
</div>

【讨论】：