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