小實例: 用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>
複製代碼

---

感謝閱讀！

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