小实例: 用vue实现手风琴效果

目标: 经过手风琴的小实例，了解vue的父子组件的事件传递方式（其中一种）。vue实例惟一标识_uid的实际使用。

建议阅读时间: 3分钟

手风琴，涉及到两个组件，<collapse>和<collapse-item>, 要实现的功能无非两点：

1. 点击子组件<collapse-item>的时候，父组件要知道点了谁
2. 父亲通知本身的全部子组件，A组件被点击了，B、C...子元素的content所有隐藏

小知识: 每一个Vue实例都会有一个递增的id，能够经过this._uid获取

代码实现:

1. 定义一个父组件Collpase，实现如下功能

1. 挂载cut方法，传入被点击的实例的Id, 遍历子组件，确认是谁被点击了
2. 没有被点击的子组件，其show属性置位false

// 引入vue
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
// 定义个父组件collapse
Vue.component('Collapse', {
  methods: {
    cut(childId) {
      this.$children.forEach(child => {
        console.log('ci', child._uid)
        if(child._uid !== childId) {
          child.show = false;
        }
      });
    }
  },
  template: `<div class="wrap"> <slot></slot> </div>`
})

复制代码

2. 定义一个子组件CollpaseItem，实现如下功能

1. 接受一个tile，做为标题
2. data中维护一个show属性，控制content的显示隐藏
3. 当title被点击的时候，经过this.$parent调用父组件的cut方法，传入当前被点击的实例的_uid
4. 置当前的组件show属性为true

Vue.component('CollapseItem', {
  props: ['title'],
  data() {
    return {show: false}
  },
  methods: {
    change() {
      console.log(this._uid)
      this.$parent.cut(this._uid);
      this.show = !this.show;
    }
   },
   template: `<div> <div class="title" @click="change">{{title}}</div> <div v-show="show"> <slot></slot> </div> </div>`
})
复制代码

3. 实例挂载，Dom渲染，完成。

<div id="app">
<collapse>
  <collapse-item title="react">内容1</collapse-item>
  <collapse-item title="vue">内容2</collapse-item>
  <collapse-item title="nodejs">内容2</collapse-item>
</collapse>
</div>
<script> let vm = new Vue({ el: '#app' }) </script>
复制代码

---

感谢阅读！

我是海明月，前端小学生。