//js //引子//思想：當(dāng)v-if=‘false'時(shí)，循環(huán)時(shí)進(jìn)行的。所以一開(kāi)始就設(shè)置為false。 ggg:{  name:'gs',  template:`   <div>   　　<p @click.stop='show=!show'>我是p標(biāo)簽</p>      //這兒show必須要初始值為false，不然就是堆棧溢出，死循環(huán)。   　　 <gs v-if='show' ></gs>　　　　　　　　　　　　    //這個(gè)是循環(huán)組件。命名后當(dāng)函數(shù)使。   </div>　　　　　　　　　}

msg:[{//對(duì)此數(shù)組遍歷。                              js  text:1, //第一層數(shù)據(jù) ，要顯示1，就要對(duì)頂層text遍歷，xxx.text就得到1。    //點(diǎn)擊‘1'彈出1-1就需要將父組件的xxx.next傳給子組件。  next:[{   text:'1-1',//第二層數(shù)據(jù)   next:[{   text:'1-1-1',//第三層數(shù)據(jù)   next:[{    text:'1-1-1-1',   }]   }]  }] },{  text:2, //第一層數(shù)據(jù) },{ text:3, //第一層數(shù)據(jù) }]

//html　　<div> 　　<ggg :msg='msg'></ggg> //這兒寫(xiě)在父組件模板中。 　</div>//jsggg:{  name:'gs',// 這兒必須起個(gè)名字，這個(gè)名字其實(shí)就是構(gòu)造函數(shù)的名字。沒(méi)有名字無(wú)法遞歸組件。  template:`// 構(gòu)造函數(shù)的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> // 這兒遞歸用組件（構(gòu)造函數(shù)），代碼運(yùn)行到這兒時(shí)會(huì)返回去調(diào)用。這兒有個(gè)很重要的操作，將這一層的a.text數(shù)據(jù)傳到下一層去，并且改為text  </li>  </ul>`,  props:['msg'],//這個(gè)是接收父組件過(guò)的值}

<li v-for='a in msg' @click.stop.self='show=!show'>// 在li標(biāo)簽添加一個(gè)點(diǎn)擊事件，改變show的值?！　{a.text}}　　<gs :msg='a.next' v-if='show' ></gs>　　　　　　　　　  //官網(wǎng)上說(shuō)了，這兒是show為true才會(huì)遞歸。就是解析下一次數(shù)據(jù)。</li>　

<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寫(xiě)在這兒，第二層數(shù)據(jù)數(shù)組中的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>