子组件中的VueJs调用方法 [英] VueJs Calling method in Child components

问题描述

我有一个道具

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

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

In my child component I can access the value

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

我需要做的是在孩子中触发一个方法每当有变化时。我该如何实现？

What I need to do is trigger a method in the child whenever there is a change. How can I achieve this?

推荐答案

您可以使用 v绑定，以使数据从父级流到子级。

You can use v-bind to make the data from the parent flow down to the child.

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

In your case it would look something like this:

<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');
  }
}

请参见此处，以供JSFiddle使用。

See here for a working JSFiddle.

这篇关于子组件中的VueJs调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！