父组件
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
浙公网安备 33010602011771号