vue - 孙子的 $emit

Posted 2023-02-23

【中文标题】vue - 孙子的 $emit

【英文标题】：vue - $emit on grand-children

【发布时间】：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 是的，我再次更新了上面的代码，请检查

这个答案***.com/a/63550379/8172857 有用吗？

【参考方案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>