为什么作品不发射？

Question

我最近开始学习Vue，遇到了一个对我来说非常奇怪且难以理解的问题。 我并不认为从架构方法的角度来看，这段代码可能是错误的，但我仍然想理解其中的逻辑。 我有四个组件 HelloWorld->ButtonsList->ButtonsPlus,ButtonsMinus 下面是他们的代码

<script setup lang="ts">
import { ref } from 'vue'
import ButtonsList from './ButtonsList/ButtonsList.vue'
defineProps<{ msg: string }>()
const plusHandler = () => {
  count.value = count.value + 1
}
const minusHandler = () => {
  count.value = count.value - 1
}
const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <p>count is {{ count }}</p>

  </div>

  
  <ButtonsList @update:plusEmit="plusHandler"  @update:minusEmit="minusHandler"  />
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>





<script setup>
import ButtonPlus from '../Buttons/ButtonPlus.vue'
import ButtonMinus from '../Buttons/ButtonMinus.vue'
</script>



<template>
  <ButtonPlus/>
  <ButtonMinus/>    
</template>





<script setup>
    const emit = defineEmits();
    const plus = () => {
        emit('update:plusEmit')
    }
</script>


<template>
    <button @click="plus" >
        +
    </button>
</template>





<script setup>
    const emit = defineEmits();
    const minus = () => {
        emit('update:minusEmit')
    }
</script>


<template>
    <button @click="minus" >
        -
    </button>
</template>

为什么，如果我在 ButtonsList 组件中有一个按钮，那么一切都可以正常工作，如果有两个，那么什么都不起作用，并且应该如何实现这一功能（如果您不使用函数传递来更改，如 React ）？ 我正在使用 vue3

我尝试使用不同的变量来使用发射，但没有任何效果

Answer 1

您将侦听器附加到

update:plusEmit

组件上的

update:minusEmit

和

ButtonsList

。问题是该组件不会发出这些事件。事件侦听器必须放置在发出这些事件的组件上，在您的情况下，它们不会冒泡到父级。

您可以：

1. 在

   ButtonList

   组件上定义相同的事件，并在子组件发出事件时发出它们，如下所示：

<ButtonPlus @update:plusEmit="emit('update:plusEmits')" />
<ButtonMinus @update:minusEmit="emit('update:minusEmits')"/>   

2. 或者取消按钮的子组件并在

   ButtonsList

中定义它们