小实例: 用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>
复制代码

感谢阅读!

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


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

查看所有标签

猜你喜欢:

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

马云如是说

马云如是说

朱甫 / 中国经济出版社 / 2008-1-1 / 39.80元

任何一个企业家的成功,都需要一种特立独行的精神。换尔言之,他一定是不断地否定别人的反对意见,坚持自己独特的观点,才能够真正走向大成功。在中国企业家群像里,马云就是这样一个特立独行的人。 目录 *永不放弃——马云论创业精神 *天下没有难做的生意——马云论经营理念 *B2B时代——马云论电子商务 *网络只是一个工具——马云论互联网与网络公司 *太多钱会坏事——马云论......一起来看看 《马云如是说》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具