vue3父子传值方法

在Vue3中，父子组件间的传值主要有以下几种方法：

1. **Props** (属性传递)：这是最常用的父子组件通信方式。父组件通过props向子组件传递数据，子组件作为接收者。父组件设置props时需要明确声明数据类型和默认值。

   // 父组件
   <ChildComponent :message="parentMessage" />

   // 子组件
   props: {
     message: {
       type: String,
       default: '默认值'
     }
   }

2. **自定义事件（emits）**：子组件可以触发自定义事件并携带数据，然后在父组件内部监听这个事件来处理数据。

   // 子组件
   this.$emit('child-event', { data })

   // 父组件
   <ChildComponent @child-event="handleChildEvent"></ChildComponent>
   methods: {
     handleChildEvent(data) {
       // 接收并处理数据
     }
   }

3. **ref 和 computed**：在父子组件之间共享复杂的数据结构时，可以使用ref或者计算属性（computed）。例如，父组件通过ref将对象传递给子组件，然后在子组件内部修改该对象。

   // 父组件
   parentRef = ref({ value: '' })
   
   // 子组件
   <input v-model="$parent.parentRef.value">

4. **Vuex store**：当需要管理全局状态时，可以使用 Vuex，它是Vue官方的状态管理模式。父子组件可以通过actions、mutations或直接访问store来获取和更新数据。

5. **Provider & Consumer（仅适用于单文件组件或使用Composition API）**：在Vue3 Composition API中，可以使用`provide`和`inject`来实现类似于React Context API的上下文传递。

每种方式都有其适用场景，选择合适的取决于具体需求和项目架构。