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

javascript event-handling vue.js vuejs2

2022-08-30 00:16:27

上下文

在 Vue 2.0 中，文档和其他文档清楚地表明，父项与子项之间的通信是通过 props 进行的。

问题

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

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

例

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

答案 1

为子组件 a 和用于直接调用子组件上的方法。ref$refs

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

有关更多信息，请参阅有关 refs 的 Vue 文档。

答案 2

您描述的是父级中状态的更改。你通过道具把它传给孩子。正如你所建议的，你会那个道具。当子项执行操作时，它会通过通知父项，然后父项可能会再次更改状态。watchemit

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>

如果你真的想把事件传递给一个孩子，你可以通过创建一个总线（它只是一个Vue实例）并将其作为道具传递给孩子来实现。