子组件数据回显
- 定义子组件的props: 在子组件
ListWrap中定义需要从父组件接收的props。
// ListWrap.vue
<template><!-- 子组件的模板内容 -->
</template><script>
export default {name: 'ListWrap',props: {// 定义接收的数据，比如是一个数组或对象dataList: {type: Array, // 或者其他类型，如Object, String, Number等default: () => []}},// 子组件的其他逻辑...
}
</script>
- 在父组件中引入子组件: 确保在父组件中引入了
ListWrap子组件。
// 父组件.vue
<template><div><!-- 在父组件的模板中使用子组件，并传递数据 --><ListWrap :dataList="parentDataList" /></div>
</template><script>
import ListWrap from './ListWrap.vue'; // 引入子组件export default {name: 'ParentComponent',components: {ListWrap // 注册子组件},data() {return {// 父组件的数据parentDataList: [// 数据内容...]};},// 父组件的其他逻辑...
}
</script>
在上面的代码中，:dataList="parentDataList" 是一个prop绑定，它将父组件的parentDataList数据传递给子组件的dataListprop。这样，子组件就可以访问并展示从父组件传递过来的数据了。