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

Question

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

Answer 1

fishenal 2018-01-29 20:54:00

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

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