vue3+vite子组件接收父组件传的复杂数据
时间: 2023-07-22 14:07:44 浏览: 46
在Vue3中,你可以使用Props来将数据从父组件传递给子组件。对于复杂数据,可以使用对象或数组类型的Props。
以下是一个示例:
父组件模板:
```
<template>
<div>
<child-component :data="myData"></child-component>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default defineComponent({
components: {
ChildComponent
},
data() {
return {
myData: {
name: 'John',
age: 30,
hobbies: ['reading', 'traveling']
}
}
}
})
</script>
```
子组件模板:
```
<template>
<div>
<h2>{{ data.name }} ({{ data.age }})</h2>
<ul>
<li v-for="hobby in data.hobbies" :key="hobby">{{ hobby }}</li>
</ul>
</div>
</template>
<script>
import { defineComponent, PropType } from 'vue'
export default defineComponent({
props: {
data: {
type: Object as PropType<{ name: string; age: number; hobbies: string[] }>,
required: true
}
}
})
</script>
```
在子组件中,我们使用了`props`来声明我们期望的数据格式,并使用了`:data`来将父组件传递给子组件的`myData`绑定到`data`属性上。在模板中,我们可以使用`data`属性来访问传递给子组件的数据。
注意:在Vue3中,需要从`vue`库中导入`PropType`类型,以便声明复杂类型的Props。