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

Question

语境

在 Vue 2.0 中，文档和 其他 文档清楚地表明，父母与孩子之间的交流是通过 props 发生的。

问题

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

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

例子

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

原文由 jbodily 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 3 组合 API

为子组件创建一个 ref ，在模板中赋值，使用 <ref>.value 直接调用子组件。

 <script setup>
import {ref} from 'vue';

const childComponentRef = ref(null);

function click() {
  // `childComponentRef.value` accesses the component instance
  childComponentRef.value.doSomething(2.0);
}
</script>

<template>
  <div>
    <child-component ref="childComponentRef" />
    <button @click="click">Click me</button>
  </div>
</template>

需要注意的几件事-

• 如果您的子组件正在使用 <script setup> ，您需要使用 defineExpose 声明公共方法（例如 doSomething 上述）。
• 如果您使用的是 Typescript，请 点击此处 了解如何输入注释的详细信息。

Vue 3 选项 API / Vue 2

给子组件一个 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 3 文档 或 refs 上的 Vue 2 文档。

原文由 joerick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您所描述的是父母的状态变化。您通过道具将其传递给孩子。正如你所建议的，你会 watch 那个道具。当孩子采取行动时，它会通过 emit 通知父母，然后父母可能会再次更改状态。

 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 实例）并将其作为 prop 传递给孩子 来做到这一点。

原文由 Roy J 发布，翻译遵循 CC BY-SA 3.0 许可协议