码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-03-02 14:26:24      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:ack   hda   同步   sync   idt   ops   config   select   ==   

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里的数据清掉的。

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

标签:ack   hda   同步   sync   idt   ops   config   select   ==   

原文地址:https://www.cnblogs.com/fczbk/p/12395215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!