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

来源：8-1 select组件完善

qq_Mr_9

2018-01-23

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

写回答

2回答

fishenal

2018-01-29

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

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])
    }
  }

你试一下？

fishenal

2018-01-25

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

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])
    }
  }

fishenal

qq_Mr_9

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

2018-01-29

共2条回复

最容易上手的Vue2.0入门实战教程

快速入门Vue2.0，组件化开发一个数字产品电商平台

3966 学习 · 999 问题

查看课程

相似问题

Vue的子组件有生命周期吗？

回答 1