子组件中的VueJs调用方法

Question

我有一个道具

<graph :active-metrics="$data.active_metrics"></graph>

在我的子组件中，我可以访问该值

export default {
      template: '<div>{{activeMetrics}}</div>',
      props: ['active-metrics'],
        methods: {

我需要做的是每当有变化时触发孩子的方法。我怎样才能做到这一点？

Answer 1

您可以使用v-bind 使数据从父级向下流向子级。

在你的情况下，它看起来像这样：

<graph v-bind:active-metrics="$data.active_metrics"></graph>

export default {
  template: '<div>{{activeMetrics}}</div>',
  props: ['active-metrics'],
  watch: {
    'active-metrics': function(){
      alert('active-metrics updated');
  }
}

请参阅 here 以获取有效的 JSFiddle。