vue3父子组件传值 setup

在 Vue3 中，父子组件传值可以通过 `props` 和 `emit` 来实现。在 `setup` 函数中，我们可以使用 `defineProps` 来定义组件的 `props`，使用 `defineEmits` 来定义组件的事件。

示例：

父组件：

<template>
  <div>
    <p>父组件：{{ message }}</p>
    <Child :child-message="message" @update-message="updateMessage" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>子组件：{{ childMessage }}</p>
    <button @click="updateParentMessage">Update parent message</button>
  </div>
</template>

<script>
import { defineProps, defineEmits } from 'vue'

export default {
  props: {
    childMessage: String
  },
  setup(props, { emit }) {
    const updateParentMessage = () => {
      emit('update-message', 'Hello from child')
    }

    return {
      updateParentMessage
    }
  }
}
</script>

在子组件中，我们使用 `props` 接收父组件传递过来的 `childMessage`，同时使用 `defineEmits` 来定义组件的事件，使用 `emit` 来触发事件。在父组件中，我们使用 `@update-message` 监听子组件的事件，并在 `updateMessage` 方法中更新 `message` 数据。