用vue写的一个简单的成员列表组件

成员列表组件

• 功能：
  
  1. 根据组别将成员分类，点击相应的类，出现成员信息；再次点击，成员信息消失，并伴随动画过渡
  2. 每一个组别都是一个子组件
• 结构

<div id="user-list-component">
    <user-list :group="usergroup"></user-list>
</div>

id为user-list-component的div为vue实例挂载的DOM，user-list为组件名称，继续往下看

<template id="user-list-html">
    <div>
         <user-list-group :items="group.web" groupis="web" imgurl="./images/img.png"></user-list-group>
         <user-list-group :items="group.network" groupis="网络" imgurl="./images/img.png"></user-list-group>
         <user-list-group :items="group.safe" groupis="安全" imgurl="./images/img.png"></user-list-group>
         <user-list-group :items="group.design" groupis="设计组" imgurl="./images/img.png"></user-list-group>
         <user-list-group :items="group.operate" groupis="运营组" imgurl="./images/img.png"></user-list-group>
    </div>
</template>

此处的template为组件user-list中的内容，可以看出，其中还包括子组件user-list-group,那么继续看这个子组件

<template id="group">
   <div class="allUser">
        <div class="group" @click="displayOrNot"><img :src="imgurl" style="width:12%">{{groupis}}</div>
        <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX">
            <ul id="web" v-if="show"> 
                <li v-for="item in items">{{item.user}}</li>
            </ul>
        </transition>

    </div>

</template>

注意哦，template中的东西必须有一个大的元素包起来，否则vue会提示有错误
以上是该子组件之中的内容，看到这里，或许有的小伙伴会觉得很乱，没错是的，那么我在贴一下vue实例

<script>
    var vm=new Vue({
        el:'#user-list-component',
        data:{
            usergroup:{
                web:[
                    {user:'web成员1'},
                    {user:'web成员2'},
                    {user:'web成员3'},
                    {user:'web成员4'},
                    {user:'web成员5'},
                ],
                network:[
                    {user:'网络成员1'},
                    {user:'网络成员2'},
                    {user:'网络成员3'},
                    {user:'网络成员4'},
                    {user:'网络成员5'},
                    {user:'网络成员6'},
                ],
                safe:[
                    {user:'安全成员1'},
                    {user:'安全成员2'},
                    {user:'安全成员3'},
                    {user:'安全成员4'},
                    {user:'安全成员5'},
                ],
                design:[
                    {user:'设计成员1'},
                    {user:'设计成员2'},
                    {user:'设计成员3'},
                    {user:'设计成员4'},
                    {user:'设计成员5'},
                ],
                operate:[
                    {user:'运营成员1'},
                    {user:'运营成员2'},
                    {user:'运营成员3'},
                    {user:'运营成员4'},
                    {user:'运营成员5'},
                ]
            }
        },
        components:{
            'user-list':{
                template:'#user-list-html',
                props:['group'],
                components:{
                    'user-list-group':{
                        template:"#group",
                        props:['items','groupis','imgurl'],
                        data: function () {
                            return {
                                show:false,
                            }
                        },
                        methods: {
                            displayOrNot:function(){
                                this.show=!this.show;
                            }
                        }
                    },
                }
            },
        },
    })
</script>

• 总结
  data中的数据我是写死的，到这里代码基本上就完了，至于css部分，就不写上去了，总结一下值得注意的地方。
  
  1. 父子组件之间的传值：
     刚开始犯的错误就是user-list组件中直接用了实例data的数据，但是vue报错，我的理解是该组件在实例挂载的元素之下，相当于实例的子组件，因此实例中的data不能直接使用，需要props传入 (需要注意：如果组件中定义的prop是使用驼峰命名的话，在使用的时候需要换成短横线分隔命名，因为HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符)
  2. 在点击显示/隐藏成员的时候使用了过渡动画，我这里使用的是animate动画库，由于本人比较懒，所以觉得还蛮方便的，我使用的地方在第三个代码段（往上翻）。使用的时候不要忘了引入哦，下载地址附上：animate.css
  3. 组件的复用，官方文档上面也有提到过，先附上地址：组件复用介绍
     就是data必须是一个函数，要不这样写的话，点击相应的组别，其他全部组别的成员信息都将会显示或者隐藏。
  4. 还有，爷爷组件不能直接传给孙子组件值，但是可以先传给爸爸，然后又爸爸传给孙子，这样一级一级下来。
  5. 最后，先写到这里，有的地方可能表述不清楚，附上效果图