简述Vue组件使用的3个步骤?,vue的组件化是如何实现的
组件可以在自己的模板中调用自己，但只能通过name选项来实现。下面这篇文章主要介绍组件递归的相关信息，组件递归是Vue组件开发的必备技能。有需要的朋友可以参考一下。
目录
序言效果展示渲染完整数据效果如下：获取节点数据效果如下：动态展开和折叠效果如下：完整代码效果如下：总结
前言
不知道大家有没有遇到过这样的场景：渲染列表数据的时候，列表的子级还是列表。如果层次少，几个for循环还是可以的，但是如果层次多或者层次不确定，就有点无从下手了。
其实这就是树形结构数据，比如常见的组织结构图、文件夹目录、导航菜单等。都属于这个结构。很多组件库都有树状的组件，但往往风格不是我们想要的，想改也很难。那么，如何自己渲染这些数据呢？答案是——分量递归！
效果展示
以上是使用组件递归，添加简单交互的演示效果。点击一个节点会输出控制台中该节点对应的数据，如果有子节点，子节点会展开或折叠。接下来，我们来看看如何达到上述效果！
渲染完整数据
数据渲染的步骤非常简单。首先，将树结构封装到列表组件中。其次，判断每个项目是否有子节点。如果有子节点，使用它自己的组件来呈现。
src/components/myTree.vue
模板
div class=tree-item
div v-for= treeData中的项目:key=item.id
div class= item-title { item . name } }/div
div v-if= item . children item . children . length class= item-childen
我的树：treeData= item . children /我的树
/div
/div
/div
/模板
脚本
导出默认值{
名称：“我的树”，
道具：{
treeData: {
类型：数组，
默认值：()=[]
}
}
}
/脚本
style lang=scss 范围。树项目{。项目标题{
填充：4px 8px
}。项目-儿童{
左填充：20px
}
}
/风格
src/App.vue
模板
我的树：树数据=树数据/我的树
/模板
脚本
const treeData=[
{id: 1，名称：级别1 1}，
{
id: 2，
名称：“第1 2级”，
儿童：[
{id: 3，名称：级别2-1}，
{id: 4，姓名： 2-2级 }
]
},
{
id: 5，
名称：“1 3级”，
儿童：[
{
id: 6，
名称：级别2 3-1 ，
儿童：[
{id: 7，名称：级别3 3-1-1}，
{id: 8，姓名：第三级3-1-2}
]
},
{id: 9，名称：级别2 3-2}，
{id: 10，name: 2级3-3}
]
}
]
从“@/components/myTree.vue”导入我的树
导出默认值{
组件：{
我的树
},
data() {
返回{
treeData: treeData
}
}
}
/脚本
效果如下
获取节点数据
接下来我们要做的就是在点击节点时，在控制台中输出相应的数据。首先我们用$emit把一级节点的item传出来，也就是把子节点传给父节点的方法。相信大家都会。
其次，内部节点的数据被传出来，同样使用子节点传递给父节点的方法，只不过我们需要在组件中将@ node-click= $ emit (node-click ，$ event)绑定到my-tree，这样每次子节点都可以调用父节点的node-click方法，而父节点调用其父节点的node-click方法，最后调用最外层的node-click。这一块有点扭曲。相信你能看几遍。修改如下：
src/components/myTree.vue
div class= item-title @ click= itemNodeClick(item) { { item . name } }/div
div v-if= item . children item . children . length class= item-childen
我的树
:treeData=item.children
@node-click=$emit(node-click ，$event)
/我的树
/div
.
itemNodeClick(item) {
这个。$emit(节点单击，item)
}
src/App.vue
我的树：tree-data= treeData @ node-click= node click /我的树
.
nodeClick(val) {
控制台。日志(瓦尔)
}
效果如下
动态展开收起
这一步的思路是给组件设置一个数组，数组中存放的是当前列表中需要展开的节点的id，当点击节点的时候添加或删除节点id，然后判断每个节点的编号在不在这个数组，在则显示子节点，不在则隐藏子节点。
src/components/myTree.vue
div class= item-title @ click= node click(item)
span{{ item.name }}/span
span v-if= item。儿童项目。孩子。长度
[{{ isOpen(item.id)？- : }}]
/span
/div
差异
v-if= item。儿童项目。孩子。长度
v-show=isOpen(item.id)
项目-儿童
我的树
:treeData=item.children
@node-click=$emit(node-click ，$event)
/我的树
/div
.
data() {
返回{
扩展密钥：[] //当前列表需要展开的节点编号组成的数组
}
},
方法：{
节点单击（项目){
这个$emit(节点单击，项目)
如果(项。儿童项目。孩子。长度){
让index=this。扩展键。(项目的索引。id)
if (index -1) {
//如果当前节点编号存在数组中，则删除
this.expandedKeys.splice(index，1)
}否则{
//如果当前节点编号不存在数组中，则添加
this.expandedKeys.push(item.id)
}
}
},
isOpen(id) {
//判断节点编号在不在数组中，在则显示，不在则隐藏
返回this.expandedKeys.includes(id)
}
}
效果如下
最后我们再添加一些样式，就大功告成啦！
完整代码
src/components/myTree.vue
模板
div class=tree-item
div v-for= treeData中的项目：key=item.id
div class= item-title @ click= node click(item)
span{{ item.name }}/span
span v-if= item。儿童项目。孩子。长度
[{{ isOpen(item.id)？- : }}]
/span
/div
差异
v-if= item。儿童项目。孩子。长度
v-show=isOpen(item.id)
项目-儿童
我的树
:treeData=item.children
@node-click=$emit(node-click ，$event)
/我的树
/div
/div
/div
/模板
脚本
导出默认值{
名称："我的树",
道具：{
treeData: {
类型：数组，
默认值：()=[]
}
},
data() {
返回{
扩展密钥：[] //当前展开的节点编号组成的数组
}
},
方法：{
节点单击（项目){
这个$emit(节点单击，项目)
如果(项。儿童项目。孩子。长度){
让index=this。扩展键。(项目的索引。id)
if (index -1) {
//如果当前节点编号存在数组中，则删除
this.expandedKeys.splice(index，1)
}否则{
//如果当前节点编号不存在数组中，则添加
this.expandedKeys.push(item.id)
}
}
},
isOpen(id) {
//判断节点编号在不在数组中，在则显示，不在则隐藏
返回this.expandedKeys.includes(id)
}
}
}
/脚本
样式lang=scss 范围。树项目{
光标：指针；项目标题{
填充：4px 8px
：悬停{
背景：# eee
}
}。项目-儿童{
左填充：20px
}
}
/风格
src/App.vue
模板
我的树：tree-data= treeData @ node-click= node click /我的树
/模板
脚本
const treeData=[
{ id: 1，姓名： 一级1 },
{
id: 2，
名称： 一级2,
儿童：[
{ id: 3，姓名： 二级2-1 },
{ id: 4，姓名： 二级2-2 }
]
},
{
id: 5，
名称： 一级3,
儿童：[
{
id: 6，
名称： 二级3-1,
儿童：[
{ id: 7，姓名： 三级3-1-1 },
{ id: 8，姓名： 三级3-1-2 }
]
},
{ id: 9，姓名： 二级3-2 },
{ id: 10，姓名： 二级3-3 }
]
}
]
从" @/components/myTree.vue "导入我的树
导出默认值{
组件：{
我的树
},
data() {
返回{
treeData: treeData
}
},
方法：{
nodeClick(val) {
控制台。日志(瓦尔)
}
}
}
/脚本
效果如下
以上是今天的分享！有兴趣的朋友可以尝试一下，进一步包装组件，或者修改成自己想要的风格。Vue官方树视图：cn.vuejs.org/v2/examples…
总结
关于组件递归的这篇文章到此为止，组件递归是Vue组件开发的必备技能。更多相关的Vue组件递归内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。