VUE-组件递归调用

“A little bit of progress every day. ”

前言

前段时间做一个VUE后台管理系统,发现很多地方都有使用到组件的递归调用。

一开始也是各种踩坑,今天抽时间整理一下放出来大家分享。

组件递归

组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以。

--这是定义递归组件的一个关键点

效果图


最终效果图

mock数据

JAVASCRIPT
data () { return { list:[ { name: '协会1', children: [ { "open_id": "1", "name": "周标" } ] }, { name: '协会2', children: [ { "name": "会长", children: [ { "open_id": "1", "name": "周标" } ] } ] }, { name: '协会3', children: [ { "name": "会长", children: [ { "open_id": "1", "name": "周标" } ] } ] }, { name: '协会4', children: [ { "name": "会长", children: [ { "open_id": "1", "name": "周标" } ] } ] }, { name: '协会5', children: [ { "name": "会长", children: [ { "open_id": "1", "name": "周标" } ] } ] } ] } }

封装成组件

HTML
<template> <li class="item"> <div @click='toggle' v-if="!model.open_id"> <div class="tit flex-box"><i class="iconfont icon-unfold" :class="[open?'open':'']" v-if='isFolder'></i><i class="iconfont icon-move" v-else></i><div class="name" :class="[!isFolder?'folder':'']" >{{model.name}}</div><!--<div class="num">{{model.data.currentNum}}/{{model.data.totalNum}}</div>--></div> </div> <ul v-else> <router-link tag="li" to="/allxuehui" class="flex-box users"> <div v-if="model.photo" class="pic flex-box"><img :src="model.photo" alt=""></div> <div class="pic text" v-else>{{model.name | filename}}</div> <div class="info"><p class="p1">{{model.name}}</p><p class="p2">{{model.open_id}}</p></div> </router-link> </ul> <ul v-show="open" v-if='isFolder'> <items v-for='(cel,index) in model.children' :model='cel' :key="index"> </items> </ul> </li> </template> <script> export default { name: 'items', props: ['model'], data () { return { open: false, } }, created () { }, computed: { isFolder() { return this.model.children && this.model.children.length } }, methods:{ toggle: function() { if(this.isFolder) { this.open = !this.open } } }, components: { }, filters:{ filename(val){ return val.substr(val.length-2) } } } </script>

组件的调用

HTML
<ul class="items"> <item :model='model' v-for='(model,index) in list' :key="index"></item> </ul>
【END】

本文链接:

版权声明:本博客所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 Joubn's blog

阅读 52 | 发布于 2020-05-26
暂无评论