我有两个组件-父组件和子组件。子组件发出一个事件,该事件应该触发父组件中的控制台输出。但是,控制台中没有打印任何内容。
测试页面版本:
<template>
<div v-on:hidden="hiddenEvent">
<TestComponent></TestComponent>
</div>
</template>
<script>
import TestComponent from "@/app/test/TestComponent";
export default {
name: "TestPage",
components: {TestComponent},
methods: {
hiddenEvent() {
console.log("hiddenEvent");
}
}
}
</script>
<style scoped>
</style>
测试组件版本:
<template>
<div class="test-container" v-if="!isHidden"
v-on:click="this.flip">
{{this.text}}
</div>
</template>
<script>
export default {
name: "TestComponent",
data() {
return {
text: "abc",
isHidden: false
}
},
methods: {
flip() {
this.isHidden = !this.isHidden;
if (this.isHidden) {
this.$emit("hidden");
} else {
this.$emit("revealed");
}
}
}
}
</script>
<style scoped>
.test-container {
padding: 2em;
background-color: #2EAC68;
}
</style>
当我单击abc
时:
它消失了:
所以我知道flip
方法被执行了,但是父级的hiddenEvent
没有被执行,因为hiddenEvent
从来没有被输出到控制台。
我做错了什么?我需要父TestPage
能够响应子TestComponent
发出的事件
2条答案
按热度按时间envsm3lx1#
您应该在
TestComponent
标签上使用v-on:hidden="hiddenEvent"
,而不是在 Package div上使用。该
应将
TestPage.vue
中的内容更新为:参见sandbox
8tntrjer2#
您正在收听来自孩子的事件,请将其放在孩子身上: