• 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

  • 相关阅读:
    Http服务器实现文件上传与下载(二)
    Http服务器实现文件上传与下载(三)
    NHibernate VS IbatisNet
    5. Element-UI的基本使用
    4. Vue脚手架
    3. Vue单文件组件
    webpack中的加载器
    webpack
    02.模块化相关规范
    01.前端工程化的学习目标
  • 原文地址:https://www.cnblogs.com/Ai-Hen-Jiao-zhi/p/12778450.html
Copyright © 2020-2023  润新知