vue两个子组件互斥显示

1.在父组件分别数据声明provinceActive=false，cityActive=false,并将showWrapperActive传入到两子组件中 :showWrapperActive=“provinceActive”,:showWrapperActive=“cityActive”
2.在子组件中利用props接收showWrapperActive,动态绑定类名class中‘active’=showWrapperActive
3.在父组件中注册change_active方法 @change_active=“changeProvinceActive”,@change_active=“changeCityActive”
之后分别在两个方法中写入

changeProvinceActive (flag) {
      this.provinceActive = flag
      if (flag) {
        this.cityActive = false
      }
    },
changeCityActive (flag) {
      this.cityActive = flag
      if (flag) {
        this.provinceActive = false
      }
    }

4.在子组件中触发父组件change_active

methods: {
    showWrapper (e) {
      e.stopPropagation()
      // this.showWrapperActive = true
      this.$emit('change_active', true)
    },
    documentClick () {
      // this.showWrapperActive = false
      this.$emit('change_active', false)
    }
  }