vue 父子组件间通讯问题处理

props 方法

父组件传参

<import-package-dialog
      v-if="dialogs.importPackage"
      dialoagName="importPackage"
      @closeDialog="onCloseDialog"
    >

子组件接收

  props: {
    dialoagName: {
      type: String,
      default: ""
    },
    selectData: {
      type: Array,
      default() {
        return []
      }
    }
  },

子组件传父组件可通 $emit 方法传参

this.$emit('closeDialog', {
        name: this.dialoagName
      });

若想父子组件数据同步更新，可通过对象的形式，此处不做叙述，我给大家介绍另一种方法 sync，只需要在父组件参数后面加上.sync即可。

 <health-check
            width="700px"
            v-if="config.attrNbr === 'HEALTH_CHECK' && isHealthCheck"
            ref="HEALTH_CHECK"
            label-width="140px"
            :containerPortList="containerPortList"
            :healthData.sync="config.healthCheck"
          />

子组件通过 update 方法对父组件数据进行更新

this.$emit('update:healthData',xxx)

父子组件数据同步更新也可以通过 v-model 方法来完成，父组件通过 v-model来绑定一个你需要同步更新的值

子组件

props: {
        // 此处必须是value才行
        value: {
            type: [Number, String],
            default: ''
        },
    },
    // 通过监听改变
    watch: {
        value(val) {
　　　　　　　// 实现方法
            this.$emit('input', val)
        }
    },    

　　

当然也可以通vuex进行处理，须知页面刷新是会把vuex里的数据清掉的。