這篇文章主要為大家詳細(xì)介紹了Vue2遞歸組件實(shí)現(xiàn)樹形菜單，具有一定的參考價(jià)值，可以用來參考一下。
感興趣的小伙伴，下面一起跟隨512筆記的小編兩巴掌來看看吧！
今天看了老長時(shí)間遞歸組件，官方給的教程太簡便了，根本看不出到底怎么用。于是自己查網(wǎng)摸索了一下，這兒只把核心思想寫出來。
效果如下圖，點(diǎn)擊后打開二級菜單，再點(diǎn)擊后打開三級。
代碼如下：
//js //引子//思想：當(dāng)v-if=‘false'時(shí)，循環(huán)時(shí)進(jìn)行的。所以一開始就設(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> }由于每次遞歸組件，就相當(dāng)于實(shí)例化了一次組件。所有寫在組件data中的值都是該組件專屬的。
我們在父組件給出一個(gè)數(shù)據(jù)，子組件調(diào)用這個(gè)數(shù)據(jù)，然后子組件的子組件調(diào)用它父組件的數(shù)據(jù)，如此循環(huán)下去。只要數(shù)據(jù)結(jié)構(gòu)相同，他們調(diào)用的方法相同，就行的通。當(dāng)最后沒有子組件的時(shí)候，
它不會報(bào)錯(cuò)，這個(gè)應(yīng)該是被vue優(yōu)化了。
代碼如下：
msg:[{//對此數(shù)組遍歷。 js text:1, //第一層數(shù)據(jù) ，要顯示1，就要對頂層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> //這兒寫在父組件模板中。 </div>//jsggg:{ name:'gs',// 這兒必須起個(gè)名字，這個(gè)名字其實(shí)就是構(gòu)造函數(shù)的名字。沒有名字無法遞歸組件。 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í)會返回去調(diào)用。這兒有個(gè)很重要的操作，將這一層的a.text數(shù)據(jù)傳到下一層去，并且改為text </li> </ul>`, props:['msg'],//這個(gè)是接收父組件過的值}到此基本概念已經(jīng)齊全了。
點(diǎn)擊1 出現(xiàn)1-1：
代碼如下：
<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)上說了，這兒是show為true才會遞歸。就是解析下一次數(shù)據(jù)。</li> 點(diǎn)擊1想出現(xiàn)1-2：修改data的值，從頂層數(shù)據(jù)出現(xiàn)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寫在這兒，第二層數(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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持512筆記。
注：關(guān)于Vue2遞歸組件實(shí)現(xiàn)樹形菜單的內(nèi)容就先介紹到這里，更多相關(guān)文章的可以留意512筆記的其他信息。
關(guān)鍵詞：vue.js
