小例項: 用vue實現手風琴效果

海明月發表於2019-05-14
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>
複製程式碼

感謝閱讀！

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

相關文章