Vue造轮子-手风琴组件

  
    内容1
    内容2
    内容3
  

//collapse

  $grey: #ddd;
  $border-radius: 4px;
  .collapse {
    border: 1px solid $grey;
    border-radius: $border-radius;
  }


//collapse-item.vue

  $grey: #ddd;
  $border-radius: 4px;
  .collapseItem {
    > .title {
      border: 1px solid $grey;
      margin-top: -1px;
      margin-left: -1px;
      margin-right: -1px;
    }
    &:first-child {
      > .title {
 border-top-left-radius: $border-radius;
 border-top-right-radius: $border-radius;
      }
    }
  }

// collapse-item

  $grey: #ddd;
  $border-radius: 4px;
  .collapseItem {
    > .title {
      border: 1px solid $grey;
      margin-top: -1px;
      margin-left: -1px;
      margin-right: -1px;
      min-height: 32px;
      display: flex;
      align-items: center;
      padding: 0 8px;
    }
    &:first-child {
      > .title {
 border-top-left-radius: $border-radius;
 border-top-right-radius: $border-radius;
      }
    }
    > .content{
      padding: 8px;
    }
  }

// collapse-item
    data (){
      return {
 open: false
      }
    }

    
      
    

• 因为结构比较简单，就父子两个组件，可以用父子通信来做。

    mounted(){
      this.eventBus.$on('update:selected', (vm)=>{
 if (vm !== this){
   this.close()
 }
      })
    },
    methods:{
      toggle(){
 if(this.open) {
   this.open = false
 }else{
   this.open = true
   this.eventBus.$emit('update:selected', this)
 }
      },
      close(){
 this.close()
      }
    }

• 方案一.用 single 变量是否需要控制 eventBus

    // 添加single选项,有single就注入，没有就不注入
    // 但是这种方式不太完美会有警告
    props: {
      single: {
 type: Boolean,
 default: false
      }
    },
    provide() {
      if(this.single){
 return {
   eventBus: this.eventBus
 }
      }
    }

// index.html

    
      
 内容1
 内容2
 内容3
      
    

// collapse-item.vue
    mounted(){
      this.eventBus && this.eventBus.$on('update:selected', (name)=>{
 if (name !== this.name){
   this.close()
 }else{
   this.show()
 }
      })
    },

• 通过 collapse.vue 传给 collapse-item

// index.js
  
    
      内容1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequatur 
      内容2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate dolore d! 
       内容3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, magnam. 
      {{selectedTab}}
    
  
// collapse.vue
 mounted(){
      this.eventBus.$emit('update:selected',this.selected)
      this.eventBus.$on('update:selected', (name)=>{
 this.$emit('update:selected',name)
      })
      this.$children.forEach((vm)=>{
 vm.single = this.single
 console.log(vm)
      })
    }
// collapse-item.vue
  mounted(){
      this.eventBus && this.eventBus.$on('update:selected', (name)=>{
 if (name !== this.name){
   if(this.single){
     this.close()
   }
 }else{
   this.show()
 }
      })
    },

    // collapse.vue
    mounted(){
      this.eventBus.$emit('update:selected',this.selected)
      this.eventBus.$on('update:addSelected', (name)=>{
 this.selected.push(name)
 this.eventBus.$emit('update:selected',this.selected)  // 通知儿子
 this.$emit('update:selected',this.selected) // 通知外面
      })
      this.eventBus.$on('update:removeSelected', (name)=>{
 let index = this.selected.indexOf(name)
 this.selected.splice(index,1)
 this.eventBus.$emit('update:selected',this.selected)
 this.$emit('update:selected',this.selected)
      })
      this.$children.forEach((vm)=>{
 vm.single = this.single
 console.log(vm)
      })
    }
    // collapse-item.vue
    methods:{
      toggle(){
 if(this.open) {
   this.open = false
   this.eventBus && this.eventBus.$emit('update:removeSelected', this.name)
   // 移除一个被选中的东西
 }else{
   this.eventBus && this.eventBus.$emit('update:addSelected', this.name)
 }
      },
    }

####10. 将所有数据流让父组件统一管理。

• 不能直接操作 props 要先深拷贝

  // collapse.vue
      mounted(){
      this.eventBus.$emit('update:selected',this.selected)
      this.eventBus.$on('update:addSelected', (name)=>{
 let selectedCopy = JSON.parse(JSON.stringify(this.selected))
 if(this.single){
   selectedCopy = [name]
 }else{
   selectedCopy.push(name)
 }
 this.eventBus.$emit('update:selected',selectedCopy)  // 通知儿子
 this.$emit('update:selected',selectedCopy) // 通知外面
      })
      this.eventBus.$on('update:removeSelected', (name)=>{
 let selectedCopy = JSON.parse(JSON.stringify(this.selected))
 let index = selectedCopy.indexOf(name)
 selectedCopy.splice(index,1)
 this.eventBus.$emit('update:selected',selectedCopy)
 this.$emit('update:selected',selectedCopy)
      })
      this.$children.forEach((vm)=>{
 vm.single = this.single
 console.log(vm)
      })
    }

• 不要出现两个东西互相让对方更新的状态

  // collapse.vue 爸爸
      mounted(){
      this.eventBus.$emit('update:selected',this.selected) // 一开始就通知所有儿子，该选中就选中
      this.eventBus.$on('update:addSelected', (name)=>{
 let selectedCopy = JSON.parse(JSON.stringify(this.selected))
 // 如果用户添加一个我就把selected拷贝一份，因为vue不支持直接修改props
 if(this.single){
   selectedCopy = [name]
 }else{
   selectedCopy.push(name)
 }
 this.eventBus.$emit('update:selected',selectedCopy)  // 得到最新被选中的item之后,通知儿子
 this.$emit('update:selected',selectedCopy) // 通知外面
      })

      this.eventBus.$on('update:removeSelected', (name)=>{
 let selectedCopy = JSON.parse(JSON.stringify(this.selected))
 let index = selectedCopy.indexOf(name)
 selectedCopy.splice(index,1)
 this.eventBus.$emit('update:selected',selectedCopy) // 如果用户想移除，也通知他儿子该移除就移除
 this.$emit('update:selected',selectedCopy)
      })
      this.$children.forEach((vm)=>{
 vm.single = this.single
 console.log(vm)
      })
    }¡
    // collapse-item.vue 儿子
 mounted(){
      this.eventBus && this.eventBus.$on('update:selected', (names)=>{
 // 监听eventBus,只要他爸爸要说更新，他就更新
 console.log(names)
 if (names.indexOf(this.name )>= 0){
   this.open = true
 }else{
     this.open = false
 }
      })
    },
    methods:{
      toggle(){
 if(this.open) {
   // 这里也没有修改自己的OPEN，而是在mounted中等爸爸通知我们修改open,所以他的open永远是爸爸在操作，儿子不操作
   this.eventBus &&this.eventBus.$emit('update:removeSelected', this.name)
   // 他自己触发一个意图，打算移除一个更新
   // 移除一个被选中的东西
 }else{
   this.eventBus && this.eventBus.$emit('update:addSelected', this.name)
   // 他自己触发一个意图，打算添加一个更新
 }
      },
    }