vue3组合式父子组件相互传值

在Vue3中，我们可以使用provide和inject来实现父子组件之间的传值。下面是一个示例：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <p>子组件的消息：{{message}}</p>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import { ref, provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    provide('message', message)
    return { message }
  }
}
</script>

子组件：

<template>
  <div>
    <h3>子组件</h3>
    <p>父组件的消息：{{parentMessage}}</p>
    <button @click="updateMessage">改变消息</button>
  </div>
</template>

<script>
import { inject, ref } from 'vue'

export default {
  props: ['message'],
  setup(props) {
    const parentMessage = inject('message')
    const childMessage = ref(props.message)
    const updateMessage = () => {
      childMessage.value = 'New message from child'
    }
    return { parentMessage, childMessage, updateMessage }
  }
}
</script>

在父组件中，我们使用provide来提供message，然后在子组件中使用inject来获取message，并将其作为parentMessage返回。在子组件中，我们也可以使用props来获取父组件传递的消息，并将其作为childMessage返回。此外，我们还定义了一个updateMessage方法来改变子组件的消息。最后，我们在子组件中使用parentMessage和childMessage来展示父组件和子组件之间的消息传递。