小例項: 用vue實現手風琴效果
摘要：
目標: 通過手風琴的小例項，瞭解vue的父子元件的事件傳遞方式（其中一種）。vue例項唯一標識_uid的實際使用。
建議閱讀時間: 3分鐘
手風琴，涉及到兩個元件，<collapse>
和<collapse-item>
, 要實現的功能無非兩點...
目標: 通過手風琴的小例項，瞭解vue的父子元件的事件傳遞方式（其中一種）。vue例項唯一標識_uid的實際使用。
建議閱讀時間: 3分鐘
手風琴，涉及到兩個元件，<collapse>
和<collapse-item>
, 要實現的功能無非兩點：
<collapse-item>
小知識: 每個Vue例項都會有一個遞增的id，可以通過this._uid獲取
程式碼實現:
1. 定義一個父元件Collpase，實現以下功能
- 掛載cut方法，傳入被點選的例項的Id, 遍歷子元件，確認是誰被點選了
- 沒有被點選的子元件，其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，實現以下功能
- 接受一個tile，作為標題
- data中維護一個show屬性，控制content的顯示隱藏
- 當title被點選的時候，通過this.$parent呼叫父元件的cut方法，傳入當前被點選的例項的_uid
- 置當前的元件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>
複製程式碼
感謝閱讀！
我是海明月，前端小學生。