javascript Vue无法接收从子组件到父组件的事件订阅

iecba09b  于 2023-01-16  发布在  Java
关注(0)|答案(2)|浏览(121)

我有两个组件-父组件和子组件。子组件发出一个事件,该事件应该触发父组件中的控制台输出。但是,控制台中没有打印任何内容。

测试页面版本

<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发出的事件

envsm3lx

envsm3lx1#

您应该在TestComponent标签上使用v-on:hidden="hiddenEvent",而不是在 Package div上使用。

<TestComponent></TestComponent>

应将TestPage.vue中的内容更新为:

<TestComponent v-on:hidden="hiddenEvent"></TestComponent>

参见sandbox

8tntrjer

8tntrjer2#

您正在收听来自孩子的事件,请将其放在孩子身上:

const app = Vue.createApp({
  methods:  {
    hiddenEvent()  {
      console.log("hiddenEvent");
    }
  }
})
app.component('testComponent', {
  template: `
    <div class="test-container" v-if="!isHidden"
        v-on:click="this.flip">
    {{this.text}}
  </div>
  `,
  data() {
    return {
      text: "abc",
      isHidden: false
    }
  },
  methods:  {
    flip()  {
      this.isHidden = !this.isHidden;
      if (this.isHidden)  {
        this.$emit("hidden");
      } else  {
        this.$emit("revealed");
      }
    }
  }
})
app.mount('#demo')
.test-container  {
  padding: 2em;
  background-color: #2EAC68;
}
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div >
    <test-component @hidden="hiddenEvent"></test-component>
  </div>
</div>

相关问题