如何在父事件的子组件上调用函数

Question

在Vue 2.0中，文档和其他文档清楚地表明，父母与孩子之间的沟通是通过道具进行的。

父母如何通过道具告诉孩子事情发生了？

我应该看一个叫事件的道具吗？这感觉不对，替代方案也不对（$emit/$on是子元素到父元素的，中心模型是远程元素的）。

我有一个父容器，它需要告诉它的子容器，可以在API上执行某些操作。我需要能够触发函数。

Answer 1

您可以使用$emit和$on。使用@RoyJ代码：

HTML：

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

运行示例：https://jsfiddle.net/rjurado/m2spy60r/1/

Answer 2

您所描述的是父级中的状态变化。你通过道具把它传给孩子。正如您所建议的，您将观看该道具。当孩子采取行动时，它会通过一个发射通知家长，然后家长可能会再次更改状态。

var Child = {
  template: '<div>{{counter}}</div>',
  props: ['canI'],
  data: function () {
    return {
      counter: 0
    };
  },
  watch: {
    canI: function () {
      if (this.canI) {
        ++this.counter;
        this.$emit('increment');
      }
    }
  }
}
new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  data: {
    childState: false
  },
  methods: {
    permitChild: function () {
      this.childState = true;
    },
    lockChild: function () {
      this.childState = false;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
<my-component :can-I="childState" v-on:increment="lockChild"></my-component>
<button @click="permitChild">Go</button>
</div>

Answer 3

给子组件一个ref，并使用$ref直接调用子组件上的方法。

HTML：

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

有关更多信息，请参阅Vue留档裁判。