vue项目中,请写一个父组件给子组件的对象传值的案例
时间: 2024-04-29 12:24:53 浏览: 64
vue父子组件传值案例
当您使用Vue框架在父组件中定义一个对象,您可以通过props将其传递给子组件。以下是一个简单的例子:
```html
<!-- 父组件 -->
<template>
<div>
<child-component :my-object="parentObject"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
parentObject: {
title: 'Vue props传递对象示例',
content: '这是一个通过props传递对象的示例',
}
};
},
};
</script>
<!-- 子组件 -->
<template>
<div>
<h2>{{ myObject.title }}</h2>
<p>{{ myObject.content }}</p>
</div>
</template>
<script>
export default {
props: {
myObject: Object,
},
};
</script>
```
在这个例子中,我们在父组件中定义了一个名为parentObject的对象,并通过props将其传递给了子组件。在子组件中,我们使用了myObject属性访问了父组件传递过来的对象的title和content属性。
阅读全文