Vue子组件包含<button>标签时，对应的父组件如何编写？

首先需要改造子组件，通过自定义事件将按钮点击的消息传递给父组件，具体实现如下：

步骤1：修改子组件代码 #

在子组件中，我们需要用defineEmits声明自定义事件，然后在按钮点击时触发该事件并传递对应的消息内容：

<!-- MyComponent.vue -->
<script setup>
// 声明自定义事件，比如命名为「message-sent」
const emit = defineEmits(['message-sent'])

const say = (msg) => {
  // 触发事件并把点击对应的消息传出去
  emit('message-sent', msg)
}
</script>

<template>
  <button @click="say('hello')">Say hello</button>
  <button @click="say('bye')">Say bye</button>
</template>

步骤2：父组件调用逻辑 #

父组件通过@（v-on的简写）监听子组件的自定义事件，然后编写对应的处理逻辑：

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue'

const handleMessage = (msg) => {
  // 这里可以根据需求处理子组件传来的消息，比如打印、更新父组件数据等
  console.log('收到子组件消息：', msg)
  // 示例：如果需要把消息同步到父组件的变量中
  // currentMsg.value = msg
}
</script>

<template>
  <MyComponent @message-sent="handleMessage" />
</template>

扩展场景：双向绑定父组件数据 #

如果你的需求是让按钮点击直接修改父组件的某个数据（类似v-model的双向绑定逻辑），可以沿用update:前缀的约定：

子组件改造： #

<!-- MyComponent.vue -->
<script setup>
const props = defineProps(['message'])
const emit = defineEmits(['update:message'])

const say = (msg) => {
  emit('update:message', msg)
}
</script>

<template>
  <button @click="say('hello')">Set message to hello</button>
  <button @click="say('bye')">Set message to bye</button>
</template>

父组件使用v-model： #

<!-- ParentComponent.vue -->
<script setup>
import { ref } from 'vue'

const parentMessage = ref('')
</script>

<template>
  <MyComponent v-model:message="parentMessage" />
  <!-- 实时展示父组件数据变化 -->
  <p>当前消息：{{ parentMessage }}</p>
</template>

内容的提问来源于stack exchange，提问作者Amrmsmb