uniapp vue3 Options API 父子组件传参,子组件如何更新父组件传来的值,传值是个对象
时间: 2024-10-22 18:14:02 浏览: 44
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
在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; // 更新父组件的状态
}
}
```
阅读全文