小实例: 用vue实现手风琴效果
栏目: JavaScript · 发布时间: 5年前
内容简介:目标: 通过手风琴的小实例,了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。建议阅读时间: 3分钟手风琴,涉及到两个组件,
目标: 通过手风琴的小实例,了解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> 复制代码
感谢阅读!
我是海明月,前端小学生。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- JQuery嵌套可排序手风琴
- Pear Admin Ant 1.3.1.Release 新增国际化支持,修复菜单手风琴动画
- JVM指令分析实例三(方法调用、类实例)
- 通过实例入门Golang
- Iptables详解+实例
- elasticsearch之实例篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP典型模块与项目实战大全
杨宇 / 清华大学出版社 / 2012-1 / 79.00元
《PHP典型模块与项目实战大全》以实战开发为原则,以PHP典型模块和项目开发为主线,通过12个高质量的PHP典型模块和6个PHP大型应用,向读者揭示了Web开发的整体结构,并详尽地介绍PHP开发与建站的技术要点。《PHP典型模块与项目实战大全》附带1张DVD,内容是作者为《PHP典型模块与项目实战大全》录制的全程多媒体语音教学视频及《PHP典型模块与项目实战大全》所涉及的源代码。《PHP典型模块与......一起来看看 《PHP典型模块与项目实战大全》 这本书的介绍吧!