Vue2 子传父方式

1. 使用 $emit 方法

子组件:

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', '这是来自子组件的消息')
    }
  }
}
</script>

父组件:

<template>
  <child-component @message-from-child="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg) // 输出: 这是来自子组件的消息
    }
  }
}
</script>

Vue3 子传父方式

1. 使用 emit 函数 (Composition API)

子组件:

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script setup>
// 使用 <script setup>
const emit = defineEmits(['message-from-child'])

const sendMessage = () => {
  emit('message-from-child', '这是来自子组件的消息')
}
</script>

<!-- 或者使用传统的 setup 函数 -->
<script>
export default {
  setup(props, { emit }) {
    const sendMessage = () => {
      emit('message-from-child', '这是来自子组件的消息')
    }
    
    return { sendMessage }
  }
}
</script>

父组件:

<template>
  <child-component @message-from-child="handleMessage" />
</template>

<script setup>
import { ref } from 'vue'

const handleMessage = (msg) => {
  console.log(msg) // 输出: 这是来自子组件的消息
}
</script>

<!-- 或者使用 Options API -->
<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg)
    }
  }
}
</script>