vue2中在props中如何传object类型的数据
时间: 2024-03-09 20:44:54 浏览: 70
vue中使用props传值的方法
5星 · 资源好评率100%
在Vue 2中,你可以在props中使用`Object`类型来接收对象类型的数据。下面是一个示例:
```javascript
props: {
myObject: {
type: Object,
required: true
}
}
```
在父组件中,你可以这样传递一个对象:
```html
<template>
<child-component :my-object="{ name: 'John', age: 30 }"></child-component>
</template>
```
或者,你可以将对象存储在父组件的数据中并将其传递给子组件:
```html
<template>
<child-component :my-object="myObject"></child-component>
</template>
<script>
export default {
data() {
return {
myObject: {
name: 'John',
age: 30
}
}
}
}
</script>
```
在子组件中,你可以像访问常规的JavaScript对象一样访问props中的对象:
```javascript
export default {
props: {
myObject: {
type: Object,
required: true
}
},
mounted() {
console.log(this.myObject.name); // "John"
console.log(this.myObject.age); // 30
}
}
```
阅读全文