小实例: 用vue实现手风琴效果

栏目: JavaScript · 发布时间: 5年前

内容简介:目标: 通过手风琴的小实例,了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。建议阅读时间: 3分钟手风琴,涉及到两个组件,

目标: 通过手风琴的小实例,了解vue的父子组件的事件传递方式(其中一种)。vue实例唯一标识_uid的实际使用。

建议阅读时间: 3分钟

手风琴,涉及到两个组件, <collapse><collapse-item> , 要实现的功能无非两点:

<collapse-item>

小知识: 每个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>
复制代码

感谢阅读!

我是海明月,前端小学生。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信号与噪声

信号与噪声

[美] 纳特•西尔弗 / 胡晓姣、张新、朱辰辰 / 中信出版社 / 2013-8 / 69.00元

【编辑推荐】 从海量的大数据中筛选出真正的信号, “黑天鹅”事件也可提前预知! “本书将成为未来十年内最重要的书籍之一。”——《纽约时报》 “对于每一个关心下一刻可能会发生什么的人来说,这都是本必读书。”——理查德•泰勒 《华尔街日报》2012年度10本最佳非虚构类图书之一 《经济学人》杂志2012年度书籍 亚马逊网站2012年度10本最佳非虚构类图书之一......一起来看看 《信号与噪声》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具