目标: 通过手风琴的小实例,了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。
建议阅读时间: 3分钟
手风琴,涉及到两个组件,<collapse>
和<collapse-item>
, 要实现的功能无非两点:
- 点击子组件
<collapse-item>
的时候,父组件要知道点了谁 - 父亲通知自己的所有子组件,A组件被点击了,B、C...子元素的content全部隐藏
小知识: 每个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>
复制代码
感谢阅读!
我是海明月,前端小学生。
所有评论(0)