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

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

建议阅读时间: 3分钟

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

1. 点击子组件<collapse-item>的时候，父组件要知道点了谁
2. 父亲通知自己的所有子组件，A组件被点击了，B、C...子元素的content全部隐藏

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

---

感谢阅读！

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

转载于:https://juejin.im/post/5cda9a086fb9a032076c2a1a