vue3父组件获取子组件的属性值

在 Vue.js 3 中，父组件想要获取子组件的属性值通常通过 props、自定义事件或者 Vuex store 来实现。以下是几种常见的方式：

1. **Props**（属性传递）：
如果子组件有公开的 prop，父组件可以在模板中直接绑定这个 prop，并在需要的时候读取。例如：

   <child-component :value="parentValue"></child-component>

然后在父组件中，`parentValue`就可以接收并显示子组件的 `value` 属性。

2. **Custom Events**（自定义事件）：
子组件可以触发一个自定义事件，然后父组件监听这个事件并在回调函数中处理数据。示例：

   // 子组件
   emit('updateValue', newValue)
   
   // 父组件
   <child-component @updateValue="handleChildValue"></child-component>
   methods: {
     handleChildValue(newValue) {
       console.log(newValue);
     }
   }

3. **Vuex**（状态管理库）：
如果应用了 Vuex，父子组件间的值共享可以借助 Vuex 的 getters 或者通过 actions 和 mutations 进行通信。

4. **ref** 和 `$emit`：
使用 Vue Refs 和 `$emit` 可以在组件间更灵活地传递动态值，比如从子组件到父组件。

   // 子组件
   const valueRef = ref();
   this.$emit('update:value', valueRef.value);

   // 父组件
   <child-component @update:value="parentValue = $event"></child-component>
   data() {
     return { parentValue: null };
   }