vue3 子组件处理props

在Vue3中，子组件处理props（属性）的方式通常有以下几种：

1. **简单类型Props**：
如果子组件只接收简单的数据类型，如字符串、数字、布尔值等，直接在子组件的模板上使用即可：

   // 父组件
   <child-component prop1="Hello" prop2={10} />

   // 子组件
   props: {
     prop1: String,
     prop2: Number
   }

子组件会自动获取并显示这些从父组件传递过来的值。

2. **响应式Props**：
对于响应式的数组和对象（来自计算属性、Vuex store等），子组件可以通过`v-model`或者其他深度监听的库（如vue-composition-api的ref）来更新数据：

   // 子组件
   props: {
     myObject: { type: Object, default: () => ({}) },
   },
   setup(props) {
     const obj = ref(props.myObject); // 创建响应式引用
     // ...处理obj的变化
     return { obj };
   }

3. **受控输入（controlled input）**：
当props用于控制表单元素（input、textarea等）时，需要在子组件中处理value的变化，并通过`v-model`或`modelValue`来同步：

   <!-- 父组件 -->
   <child-component :inputValue="parentInputValue" />

   <!-- 子组件 -->
   props: {
     inputValue: String,
   },
   methods: {
     updateInput(event) {
       this.$emit('update-input-value', event.target.value);
     }
   }
   <input v-model="inputValue" @input="updateInput" />

4. **不可变Props（ Immutable Props）**：
使用`readonly`关键字标记props，保证它们不会被子组件修改。如果试图更改，将会抛出错误。