vue 递归组件使用示例

前文

我们需要做一个树形组件用来展示一些无限子级的数据时就要用到vue提供的递归组件
首页了解一下 vue 中 name属性 为什么 export 有name这个属性

name

类型：string
限制：只有作为组件选项时起作用。
详细：
允许组件模板递归地调用自身。 注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 ，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

利用组件循环实现未知限制的数据展示

父级组件 通过这个组件来获取将要展示的无限级数据
tree-list 是用到的的递归组件
使用递归组件时需要给定一个结点 如 v-if=“item.child” 以免陷入无限循环

demo

//demo
<template>
		<ul>
			<li v-for="(item,index) in list" :key="index">
				<p>{{item.name}}</p>
				<treeList @row="handleConsole" :child="item.child" v-if="item.child"></treeList>
			</li>
		</ul>
</template>
<script>
	import treeList from './tree-list'
	export default {
		components: {treeList},
		name: 'tree',
		data () {
			return {
				list: [
					{
						name: 'name1',
						child:[
							{
								name:'name12',
								child:[
									{
										name:'name123',
										child:[
											{
												name:'name1234'
											},
											{
												name:'name12345'
											}
										]
									},
									{
										name:'name223'
									}
								]
							},
							{
								name:'name321',
								child:[
									{
										name:'name322'
									},
									{
										name:'name3233'
									}
								]
							}
						]
					},
					{
						name: 'name2',
						child:[
							{
								name:'name12',
								child:[
									{
										name:'name123'
									},
									{
										name:'name123'
									}
								]
							},
							{
								name:'name123',
								child:[
									{
										name:'name1233'
									},
									{
										name:'name1233'
									}
								]
							}
						]
					}
				]
			}
		},
		methods: {
			handleConsole(item){
				console.log(item.name, 'tree')
			},
		},
	}
</script>

tree-list 是用来递归的组件

使用组件循环展示时，非全局引用下必须命名name，
name的解释请回到文章顶部，
在tree-list中引用本身，来实现数据的无限级展示，同样需要给定一个结点

demo

<template>
		<ul>
			<li v-for="(item,index) in child" :key="index">
				<p @click="handleClick(item)">{{item.name}}</p>
				<treeList @row="handleConsole" v-if="item.child" :child="item.child"></treeList>
			</li>
		</ul>
</template>
<script>
	import treeList from './tree-list'
	export default {
		components: {treeList},
		name: 'treeList',
		props: {
			child:Array
		},
		methods: {
			handleClick(item){
				this.$emit('row', item)
			},
			handleConsole(item){
				this.$emit('row', item)
			},
		},
	}
</script>

数据传递

在中间中我们通常有一写交互行为，如何获取当前展示的数据
当点击出发时通过$emit(‘row’, item) 向父级传递 row回调，tree-list本身就是自己的子级或是父级，
所以监听emit() 事件名要相同，无论是tree中 还是tree-list中， 包括tree-list中点击出发的名字
最后我们在tree组件中就可以拿到自己想要的数据交互了。 如果tree向上还有父级那么这时emit()事件名则可以与tree-list不同， 因为这已经不再循环组件中了。

总结

在使用循环组件时要做以下几点

1. 保证循环组件有name命名
2. 循环组件要有一个结点，避免无限循环
3. 循环组件事件，因为可能是自己的子级或是父级， 所在emit()响应时 命名需要相同