子组件把接收的数转换成集合
时间: 2023-08-14 08:02:47 浏览: 32
在 Vue 中,子组件可以通过 props 接收来自父组件的数据,如果需要将接收到的数据转换成集合,可以在子组件的 `computed` 计算属性中对接收到的数据进行处理。
例如,如果父组件传递给子组件的数据是一个字符串,需要将它转换成集合,可以在子组件中定义一个计算属性 `list`,在该计算属性中对接收到的数据进行处理:
```
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: {
type: String,
required: true
}
},
computed: {
list() {
// 将接收到的字符串转换成集合
return JSON.parse(this.data)
}
}
}
</script>
```
在父组件中,可以将集合转换成字符串后再传递给子组件:
```
<template>
<div>
<child-component :data="JSON.stringify(list)"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
list: [
{ id: 1, name: 'vue' },
{ id: 2, name: 'react' },
{ id: 3, name: 'angular' }
]
}
}
}
</script>
```
这样,子组件就可以将接收到的字符串数据转换成集合并使用。