vue - 孙子的 $emit答案

【问题标题】：vue - $emit on grand-childrenvue - 孙子的 $emit
【发布时间】：2021-09-20 19:22:43
【问题描述】：

我的组件有多层：

Class A > Class B > Class C > contain <button/>

我想知道如何将Class A 中的updateTest 作为我在Class C 中的按钮中的onClick 函数传递

更新 1

ClassA.vue

<template>
  <ClassB @update-test="updateTest" />
</template>

<script>
import ClassB from './ClassB';
  components: {
    ClassB,
  },
  methods: {
    updateTest(name, age) {
      console.log(name)
      console.log(age)     
    },
  }
</script>

ClassB.vue

<template>
  <div>
    <ClassC
      @update-test="$emit('update-test')"
    />
  </div>
</template>

<script>
import ClassC from "./ClassC";

export default {
  name: "ClassB",
  components: {
    ClassC,
  },
};
</script>

ClassC.vue

<template>
  <div>
    <button
      @click="$emit('update-test', 'Tom', '19')"
    />
  </div>
</template>

<script>

export default {
  name: "ClassC"
};
</script>

【问题讨论】：

@Boussadjra Brahim 请检查我的更新
是 update-test 从 A 类发出的吗？
建议您使用提供/注入，而不是发射。提供来自父母的函数并在您的孩子/孙子女中调用该函数。
@Boussadjra Brahim 是的，我再次更新了上面的代码，请检查
这个答案stackoverflow.com/a/63550379/8172857 有用吗？

标签： vue.js

【解决方案1】：

您可以使用event bus 在复杂的分层组件上发出和接收事件。

仅供参考：

vue2 方法：https://www.digitalocean.com/community/tutorials/vuejs-global-event-bus
vue3 方法：https://github.com/developit/mitt

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案2】：

您可以通过多种方式做到这一点：

使用全局事件总线（Vue 社区不推荐）。或者按照 Tino 的建议，您可以 use an external library。
经过两步流程，在 B 类中捕获事件，然后从 B 发出一个事件，在 A 类中捕获。
使用 VUEX 设置 C 类状态的状态。例如“testUpdated = true。

【讨论】：

或docs 中建议的数字 4：使用实现事件发射器接口的外部库
如果您需要访问数据“name: 'Tom', Age: 19” 对象，那么您将执行以下操作：在 B 类中，创建一个方法，使得 ... @update- test="myMethod(object)" 然后在你的方法中 ... this.$emit('update-test2', object)

【解决方案3】：

在组件ClassA 中使用提供选项传递updateTest 方法：

A 类：

<template>
  <ClassB  />
</template>

<script>
import ClassB from './ClassB';
export default{
  components: {
    ClassB,
  },
  methods: {
    updateTest(name, age) {
      console.log(name)
      console.log(age)     
    },
 
  },
provide: function () {
  return {
  
    updateTest:this.updateTest
  }
},
}
</script>

ClassC : 从 classA 注入方法，以便在单击按钮时运行它

<template>
  <div>
    <button
      @click="updateTest('Tom', '19')"
    />
  </div>
</template>

<script>

export default {
  name: "ClassC",
  inject: ['updateTest']
};
</script>

【讨论】：