vue3子给父传值 自定义时间

在 Vue3 中，我们可以使用 emit 函数来自定义事件，并将值传递给父组件。

首先，在子组件中定义一个方法来触发自定义事件，并将要传递的值作为参数传递给 emit 函数。

<template>
  <button @click="sendTime">发送时间</button>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  setup(props, context) {
    const state = reactive({
      time: ''
    })

    const sendTime = () => {
      state.time = new Date().toLocaleTimeString()
      context.emit('custom-event', state.time)
    }

    return {
      ...toRefs(state),
      sendTime
    }
  }
})
</script>

然后，在父组件中监听自定义事件，并将子组件传递的值保存在父组件的数据中。

<template>
  <div>
    <p>子组件传递的时间：{{ time }}</p>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      time: ''
    })

    const handleCustomEvent = (time) => {
      state.time = time
    }

    return {
      ...toRefs(state),
      handleCustomEvent
    }
  }
})
</script>

现在，当子组件中的发送时间按钮被点击时，会触发自定义事件并将时间值传递给父组件，父组件会监听自定义事件并将值保存在父组件的数据中，从而实现了子组件向父组件传递值的功能。