父组件
TopicTypes 注册的子组件名称
<template>
<Row> <Col> <FormItem label="选项">
//使用 optionEntityList 绑定数据 子组件还用optingEntityList接受 <TopicTypes :optionEntityList="questionInfo.optionEntityList" ref="topicTypes"></TopicTypes> </FormItem> </Col> </Row>
</template>
export default {
name: 'parent',
components: {
TopicTypes
},
data () {
return {
modal: { // 弹框配置
},
spinShow: false,
questionInfo: { // 传参
optionEntityList: [ { "id": "1", "optionContent": "后台回来的1", "optionSerial": "B", "tmp": false},
{ "id": "2", "optionContent": "后台回来的2", "optionSerial": "A", "tmp": false}
]
},
methods: {
}
}
子组件
<template> {{topicTypeItem.items}} //自动绑定数据 for循环省了 </template> <script> export default { name: 'topicTypes', props: ['optionEntityList'], data () { return { topicTypeItem: { items: [ { optionSerial: 'A', tmp: false, status: 1, index: 1, optionContent: '' } ] } } },
//监听和methods 是手动获取数据 watch: {// 监听optionEntityList optionEntityList: function (newVal, oldVal) { this.watchOption(newVal)// newVal就是监听的optionEntityList } }, methods: { watchOption(newVal) { // 获取optionEntityList(父组件传过来的) this.topicTypeItem.items = newVal }, } } </script>
参考 https://blog.csdn.net/qq_42221334/article/details/91872329