今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。
效果如下图，点击后打开二级菜单，再点击后打开三级。
//js //引子//思想：当v-if=‘false'时，循环时进行的。所以一开始就设置为false。 ggg:{
name:'gs', template:` <div> <p @click.stop='show=!show'>我是p标签</p> //这儿show必须要初始值为false，不然就是堆栈溢出，死循环。 <gs v-if='show' ></gs> //这个是循环组件。命名后当函数使。 </div> }
由于每次递归组件，就相当于实例化了一次组件。所有写在组件data中的值都是该组件专属的。
树状结构：
我们在父组件给出一个数据，子组件调用这个数据，然后子组件的子组件调用它父组件的数据，如此循环下去。只要数据结构相同，他们调用的方法相同，就行的通。当最后没有子组件的时候，
它不会报错，这个应该是被vue优化了。
思想：递归调用某个组件，而这个组件的作用就是解析出此层的数据。因此数据的格式就有技巧：
msg:[{
//对此数组遍历。 js text:1, //第一层数据 ，要显示1，就要对顶层text遍历，xxx.text就得到1。 //点击‘1'弹出1-1就需要将父组件的xxx.next传给子组件。 next:[{
text:'1-1',//第二层数据 next:[{
text:'1-1-1',//第三层数据 next:[{
text:'1-1-1-1', }
] }
] }
] }
,{
text:2, //第一层数据 }
,{
text:3, //第一层数据 }
]
//html <div> <ggg :msg='msg'></ggg> //这儿写在父组件模板中。 </div>//jsggg:{
name:'gs',// 这儿必须起个名字，这个名字其实就是构造函数的名字。没有名字无法递归组件。 template:`// 构造函数的return值,模板。 <ul > <li v-for='a in text'> {
{
a.text}
}
//第一次1、2、3；第二次 1-1 ，第三次1-1-1，第四次1-1-1-1 <gs :msg='a.next'></gs> // 这儿递归用组件（构造函数），代码运行到这儿时会返回去调用。这儿有个很重要的操作，将这一层的a.text数据传到下一层去，并且改为text </li> </ul>`, props:['msg'],//这个是接收父组件过的值}
到此基本概念已经齐全了。
点击1 出现1-1：
<li v-for='a in msg' @click.stop.self='show=!show'>// 在li标签添加一个点击事件，改变show的值。 {
{
a.text}
}
<gs :msg='a.next' v-if='show' ></gs> //官网上说了，这儿是show为true才会递归。就是解析下一次数据。</li>
点击1想出现1-2：修改data的值，从顶层数据出现1 2 3可以推断出来。
全代码：
<template > <div> <ggg :msg='msg'></ggg> //组件使用 父组件传msg 子组件接收(：msg） </div></template><script>export default {
//这儿用的脚手架，若是普通文件，这儿就是new Vue（{
}
） data(){
return {
msg:[{
text:1, next:[{
text:'1-1', next:[{
text:'1-1-1', next:[{
text:'1-1-1-1', }
] }
] }
,{
text:'1-2' //1-2写在这儿，第二层数据数组中的a[1].text就是‘1-2' }
] }
,{
text:2, }
,{
text:3, }
] }
}
, components:{
ggg:{
name:'gs', template:` <ul > <li v-for='a in msg' @click.stop.self='show=!show'> {
{
a.text}
}
<gs :msg='a.next' v-if='show' ></gs> </li> </ul>`, props:['msg'], data(){
return {
show:false }
}
}
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
