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>
			<li v-for="(item,index) in list" :key="index">
				<p>{{item.name}}</p>
				<treeList @row="handleConsole" :child="item.child" v-if="item.child"></treeList>
</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>
			<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>
</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)