首页uniapp vue3 Options API 父子组件传参，子组件如何更新父组件传来的值，传值是个对象

uniapp vue3 Options API 父子组件传参，子组件如何更新父组件传来的值，传值是个对象

时间: 2024-10-22 09:14:02 浏览: 129

在uniApp的Vue3中，如果你使用的是Options API模式，父子组件间传参通常通过props来进行。假设父组件将一个对象作为属性`props: { myObject: Object }`传递给子组件，子组件想要更新并影响到父组件，可以按照以下步骤操作： 1. **在子组件内接收和处理数据**: 子组件模板上绑定这个prop： ```html <template> <input v-model="myValue" @change="updateParentObject"> </template> ``` 在`data()`中定义一个局部变量用于保存子组件修改的部分： ```javascript export default { data() { return { myValue: this.$props.myObject.value // 如果对象有'value'字段 }; }, } ``` 2. **事件监听与更新父组件**: 在子组件内部，当输入框改变时，触发`updateParentObject`方法： ```javascript methods: { updateParentObject(e) { const updatedObject = { ...this.$props.myObject, value: e.target.value }; // 更新对象部分属性 this.$emit('update:myObject', updatedObject); // 使用$emit通知父组件更新 }, } ``` 3. **父组件监听子组件变化**: 父组件需要监听来自子组件的`update:myObject`事件，并更新自身状态： ```javascript <template> <ChildComponent :myObject="parentObject" @update:myObject="handleChildUpdate"></ChildComponent> </template> methods: { handleChildUpdate(updatedObject) { this.parentObject = updatedObject; // 更新父组件的状态 } } ```

阅读全文