浅谈Vue3——父子组件传值

news/2025/1/15 19:57:05/

引言

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它提供了一种简洁、灵活的方式来管理和渲染数据。在Vue3中，父子组件之间的数据传递是一个常见的需求。本文将介绍如何在Vue3中传递对象，并且在子组件中访问和修改父组件对象中的属性值。

传递对象到子组件

在Vue3中，可以通过props属性将数据从父组件传递到子组件。为了传递一个对象，我们可以将对象作为props的值传递给子组件。下面是一个示例：

// 父组件
<template><div><child-component :myObject="parentObject"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {parentObject: {name: 'John',age: 30,},};},
};
</script>// 子组件
<template><div><p>Name: {{ myObject.name }}</p><p>Age: {{ myObject.age }}</p></div>
</template><script>
export default {props: {myObject: {type: Object,required: true,},},
};
</script>

在上面的示例中，父组件通过props将parentObject传递给子组件。子组件通过myObject属性接收该对象，并在模板中访问和显示对象的属性值。

修改父组件对象中的属性值

有时候，我们需要在子组件中修改父组件对象中的属性值。为了实现这一点，我们可以使用Vue提供的事件机制。下面是一个示例：

// 父组件
<template><div><child-component :myObject="parentObject" @update-object="updateParentObject"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {parentObject: {name: 'John',age: 30,},};},methods: {updateParentObject(updatedObject) {this.parentObject = updatedObject;},},
};
</script>// 子组件
<template><div><p>Name: {{ myObject.name }}</p><p>Age: {{ myObject.age }}</p><button @click="updateObject">Update Object</button></div>
</template><script>
export default {props: {myObject: {type: Object,required: true,},},methods: {updateObject() {this.myObject.name = 'Jane';this.myObject.age = 25;this.$emit('update-object', this.myObject);},},
};
</script>

在上面的示例中，子组件中的按钮点击事件会修改myObject对象的属性值，并通过$emit方法触发update-object事件，将更新后的对象传递给父组件。父组件中的updateParentObject方法会接收到子组件传递的更新后的对象，并将其赋值给parentObject，从而实现了父组件对象的属性值修改。