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

Posted 2020-11-27 fczbk

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)

　　

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