VueJS 3：Bare-bones $emit 与 v-if 不工作

Question

我有两个 VueJS 组件，一个 parent 和一个 child。我在这里试图实现的是一个 bare-bones emit 示例，以作为以后的文档和参考。按下一个按钮，我希望显示一条隐藏消息 (v-if)。目前，该按钮没有任何作用。

过去一个半小时我一直在寻找这个问题的答案。我查看了官方文档，在 YouTube 上以及在搜索引擎查询后似乎相关的所有地方。我的问题的答案必须非常简单，但不知何故我似乎找不到它。

Parent

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>

  <div @myEmit="handleEmit" v-if="show">
    show or not
  </div>
  <!-- <div>abcdef</div> -->
  <!-- <input type="text" @handleEmit="myEmit"> -->
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    handleEmit () {
      this.show = true;
      console.log(this.show);
    }
  }
}
</script>

<style scoped>
  .home {
    background: lime !important;
  }
</style>

Child

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  emits: ['myEmit', "test"],
  props: {
    msg: String
  },
  methods: {
    handleClick() {
      this.$emit('myEmit');
      this.$emit('test');
      console.log("emit event detected");
      // console.log(this.$emit);
    }
  }
}
</script>

<style scoped>
  .hello {
    background: pink;
  }
</style>

Answer 1

@myEmit 错误地应用于您要有条件显示的 <div>。 div 不会发出 myEmit 事件，因此永远不会调用您的事件处理程序。

解决方案是将 @myEmit 移动到 <HelloWorld>，会发出事件：

<HelloWorld msg="Welcome to Your Vue.js App"/>

       ❌ div has no myEmit event
<div @myEmit="handleEmit" v-if="show">
  show or not
</div>

             ✅
<HelloWorld @myEmit="handleEmit" msg="Welcome to Your Vue.js App"/>

<div v-if="show">
  show or not
</div>

demo

VueJS 3：Bare-bones $emit 与 v-if 不工作

VueJS 3: Bare-bones $emit with v-if not working

vue.js

vuejs3