vue父传子可以传复杂数据类型吗
时间: 2023-07-22 22:04:45 浏览: 49
可以的。在Vue中,可以使用props来将数据从父组件传递到子组件中。props可以传递任何JavaScript数据类型,包括复杂数据类型,如对象和数组。
例如,在父组件中定义一个对象:
```javascript
<template>
<child-component :data="myObject"></child-component>
</template>
<script>
export default {
data() {
return {
myObject: {
name: 'John',
age: 30,
hobbies: ['reading', 'hiking']
}
}
}
}
</script>
```
然后,在子组件中接收该对象作为props:
```javascript
<template>
<div>
<h2>{{ data.name }}</h2>
<p>Age: {{ data.age }}</p>
<ul>
<li v-for="(hobby, index) in data.hobbies" :key="index">{{ hobby }}</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: Object
}
}
</script>
```
在子组件中,我们可以使用{{}}插值语法来访问父组件传递过来的对象的属性和方法。