Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.5k views
in Technique[技术] by (71.8m points)

父组件如何分辨子组件中通过同一个事件通知的不同变量?

在网上找了一个地址选择的组件,功能是选择国家省份城市,简略代码如下。我的问题是,这里在选择了国家、省份、城市时,都是使用 addressSelect 事件向父进程通信,那父进程怎么知道当前事件返回的数据是国家还是省份或者城市呢?我应该怎么使用这个组件:

  1. 父组件通过 v-model 绑定 countryCodeprovinceCodecityCode 多个变量?不过我没找到怎么通过 v-model 通过绑定多个变量的方法
  2. 把事件变成 3 个,比如 selectCountryselectProvinceselectCity,便于父进程区分事件类型

谢谢!

<template>
  <div id="AddressSelect">
    <el-row>
      <el-col span="6">
        <el-select
          v-model="countryCode"
          @change="changeCountry"
          :placeholder="$t('国家')"
        >
          <el-option (省略)></el-option>
        </el-select>
      </el-col>
      <!-- 后面是省份、城市选择,代码省略 -->
    </el-row>
  </div>
</template>

<script>
export default {
  model: {
    event: 'addressSelect',
  },
  
  data() {
    return {
      countryCode: '', // 国家编码
      provinceCode: '', // 省份编码
      cityCode: '', // 城市编码
      // 省略
    };
  },
  
  methods: {
    changeCountry(val) {
      // 省略部分代码
      this.$emit('addressSelect', val);
    },
    changeProvince(val) {
      this.$emit('addressSelect', val);
    },
    changeCity(val) {
      this.$emit('addressSelect', val);
    },
  }
}
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

子组件通信的时候添加一个标识:
this.$emit('addressSelect', val, 'country')
父组件接收:

<child @addressSelect="addressSelect(arguments)" />
addressSelect(args) {
    console.log(args)
}

父组件通过args[0], args[1]拿到相应的参数

或者子组件传递一个对象,在对象中添加相应的标识:

this.$emit('addressSelect', {
    val,
    flag: 'country'
})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...