vue 父组件向子组件传参197

父组件

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

原文地址:https://www.cnblogs.com/Ai-Hen-Jiao-zhi/p/12778450.html