关于多个selection组件和单个selection组件，区分的方法有哪些？

Question

老师说的多个selection组件，在单个的时候会因为isDrop属性始终为true（点击的时候触发eventBus，之后在this.isDrop=!this.isDrop）,关不掉，我自己想了个办法是通过父组件给selection传值来判断是否需要触发eventBus，但是感觉有点麻烦特别是selection有很多的话，每个都得传这个组件 有其他什么办法么？

Answer 1

fishenal 2018-01-29 20:54:00

顺序调整一下可以实现，先触发事件，再更新状态：

mounted () {
    eventBus.$on('reset-status', () => {
      this.isDrop = false
    })
  },
  methods: {
    toggleDrop (event) {
      event.stopPropagation()
      // 这里的顺序
      if (!this.isDrop) {
        eventBus.$emit('reset-status')
      }
      this.isDrop = !this.isDrop
    },
    chooseSelection (index) {
      this.nowIndex = index
      eventBus.$emit('reset-status')
      this.$emit('on-change', this.selections[this.nowIndex])
    }
  }

你试一下？

Answer 2

fishenal 2018-01-25 21:40:07

我印象里通过阻止事件冒泡就能解决这个问题，这是我当初写的代码：

mounted () {
    eventBus.$on('reset-status', () => {
      this.isDrop = false
    })
  },
  methods: {
    toggleDrop (event) {
        //阻止事件冒泡
      event.stopPropagation()
      eventBus.$emit('reset-status')
      this.isDrop = !this.isDrop
    },
    chooseSelection (index) {
      this.nowIndex = index
      // this.isDrop = false
      this.$emit('on-change', this.selections[this.nowIndex])
    }
  }

• 提问者 qq_Mr_9 #1

  我是按老师的方法来用的，但是行不通。每次点击的时候eventBus.$emit('reset-status')会把isDrop置为false，然后this.isDrop = !this.isDrop会把isDrop置为true,所以点击之后所有的结果都是true

• fishenal 回复 提问者 qq_Mr_9 #2

  你看下我更新的答案，改一下顺序应该可以