Vue communication problems between father and son assembly process

props method

Parent component parameter passing

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

Receiving subassembly

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

Subassembly parent assembly may pass through $ parameter passing method EMIT

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

For parent-child component data synchronization update, can be in the form of an object, not described here, I will give you another way sync, you can just add .sync behind parent component parameters.

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

Subassembly update the parent element data update method

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

  

Of course, can be handled through vuex, notes will vuex page refresh is cleared in the data.

Guess you like

Origin www.cnblogs.com/fczbk/p/12395215.html