在Vue，我如何向孙辈发放$emit

Question

我的组件具有多级：

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

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

更新1

A类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>

B.vue类

<template>
<div>
<ClassC
@update-test="$emit('update-test')"
/>
</div>
</template>
<script>
import ClassC from "./ClassC";
export default {
name: "ClassB",
components: {
ClassC,
},
};
</script>

C类vue

<template>
<div>
<button
@click="$emit('update-test', 'Tom', '19')"
/>
</div>
</template>
<script>
export default {
name: "ClassC"
};
</script>

Answer 1

您可以使用event bus在复杂的层次结构组件上发送和接收事件。

FYI:

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

Answer 2

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

• 使用全局事件总线(Vue社区不建议使用(。或者，正如蒂诺所建议的，你可以使用一个外部库
• 经过两个步骤，在类B中捕获事件，然后从B发出事件，再在类a中捕获
• 使用VUEX设置C类状态的状态。例如"；testUpdated=true

Answer 3

在组件ClassA中，使用provide选项传递方法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>