在前端Vue开发中，经常遇到过这种需求，点击某条数据来查看详情，详情页又被单独封装成一个组件，在父组件中引入该子组件，当点击按钮触发事件时，传入数据参数，初始化子组件，设置子组件可见。这里提供两种初始化子组件的方式

1.设置子组件的ref属性，通过$refs.refAttribute.init来初始化子组件

首先在子组件中设置一个init方法，用来设置绑定的是否可见参数为true以及初始化子组件的form表单内容

 methods: {
      init (vehicleNumber) {
        const vehicle = vehicleNumber && vehicleNumber.length > 0 ? vehicleNumber[0] : ''
        const letter = vehicleNumber && vehicleNumber.length > 1 ? vehicleNumber[1] : ''
        const num = vehicleNumber && vehicleNumber ? vehicleNumber.substring(2) : ''
        this.$nextTick(() => {
          this.form.setFieldsValue({ //表单内容由传来的参数赋值
            selectedAbbreviations: vehicle,
            Letters: letter,
            text: num
          })
        })
        this.visible = true // 组件是否可见
      },

在父组件中引入子组件并设置ref属性

<selectVehicleDriverNumber ref="selectVehicleDriverNumber" @getVehicle_driverNumber="getVehicleDriverNumber"></selectVehicleDriverNumber>
<!--@getVehicle_driverNumber是监听子组件修改内容后传出的参数，由父组件接收并调用方法-->

当点击某条记录（数据）后，初始化子组件

 <a-icon slot="suffix" type="edit" style="color: rgba(0,0,0,.45)" @click="openModal"/>

 openModal () {
         this.$refs.selectVehicleDriverNumber.init(this.form.getFieldValue('license_plate_number'))
     },

2.使用父子组件间的通信，通过监听某个值的状态来决定是否初始化子组件

在父组件中引入子组件并传递一个对象，该对象包含了一个Boolean值（默认为false）和另一个对象，Boolean值用来决定是否初始化组件，对象为传递的参数

<listEdit ref="listEdit" :show="componentsShow" ></listEdit>

当点击某条记录（数据）后，更改对象中的Boolean值同时将参数放入componentsShow对象中

<a @click="editClick(record)">编辑</a>

editClick (record) {
       this.componentsShow = {
         show: true,
         record: record,
         typeName: 'edit'
       }
     }

子组件接受传来的componentsShow对象参数

props: {
      // eslint-disable-next-line vue/require-default-prop
      show: {
        type: Object
      }
    }

在子组件中监听父组件传来的对象中的Boolean值，如果为true则调用子组件的init()函数初始化子组件（设置表单的值）

watch: {
      show (NewValue, OldValue) {
        console.log('new----', NewValue)
        console.log('old----', OldValue)
        if (NewValue.show) {
          this.init(NewValue.record, NewValue.typeName)
        }
      }
    }