真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue.js中怎么利用遞歸組件構建樹形菜單

本篇文章給大家分享的是有關Vue.js中怎么利用遞歸組件構建樹形菜單,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務,包含不限于成都網(wǎng)站設計、網(wǎng)站制作、金華網(wǎng)絡推廣、成都小程序開發(fā)、金華網(wǎng)絡營銷、金華企業(yè)策劃、金華品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供金華建站搭建服務,24小時服務熱線:028-86922220,官方網(wǎng)址:www.cdcxhl.com

在Vue.js中一個遞歸組件調(diào)用的是其本身,如:

Vue.component('recursive-component', {
 template: `
    
 });

遞歸組件常用于在blog上顯示注釋、嵌套的菜單,或者基本上是父和子相同的類型,盡管具體內(nèi)容不同。例如:

Vue.js中怎么利用遞歸組件構建樹形菜單

現(xiàn)在給您演示一下如何有效地使用遞歸組件,我將通過建立一個可擴展/收縮的樹形菜單的來一步步進行。

數(shù)據(jù)結構

一個樹狀UI的遞歸組件將是一些遞歸數(shù)據(jù)結構的可視化表達。在本教程中,我們將使用樹狀結構,其中每個節(jié)點都是一個對象:

一個 label 屬性。

如果它有子節(jié)點,一個 nodes 屬性,則它是一個或多個節(jié)點的數(shù)組屬性。

與所有樹結構一樣,它必須有一個根節(jié)點,但可以無限深。

let tree = {
 label: 'root',
 nodes: [
  {
  label: 'item1',
  nodes: [
   {
   label: 'item1.1'
   },
   {
   label: 'item1.2',
   nodes: [
    {
    label: 'item1.2.1'
    }
   ]
   }
  ]
  }, 
  {
  label: 'item2' 
  }
 ]
 }

遞歸組件

讓我們做一個遞歸組件來顯示我們的稱為 TreeMenu 的數(shù)據(jù)結構。它只顯示當前節(jié)點的標簽,并調(diào)用自己來顯示任何子節(jié)點。文件名:TreeMenu.vue,內(nèi)容如下:


 

如果你使用一個組件遞歸,必須先給 Vue.component 做一個全局的定義,或者,給它一個 name 屬性。否則,任何子組件將無法進一步調(diào)用它,你會得到一個不確定的“undefined component error”的錯誤提示。

基本事件

與任何遞歸函數(shù)一樣,你需要一個基本事件來結束遞歸,否則渲染將無限期地繼續(xù)下去,最終會導致堆棧溢出。

在樹菜單中,當我們到達一個沒有子節(jié)點的節(jié)點的時候,我們希望停止遞歸。你能通過 v-if 做到這一功能,但我們選擇使用 v-for 將隱式地為我們實現(xiàn)它;如果 nodes 數(shù)組沒有任何進一步的定義 tree-menu 組件將被調(diào)用。template.vue文件如下:

使用用法

我們現(xiàn)在如何使用這個組件?首先,我們聲明一個Vue實例,具有一個數(shù)據(jù)結構包括data屬性和定義過的treemenu組件。app.js文件如下:

 import TreeMenu from './TreeMenu.vue'
 let tree = {
 ...
 }
 new Vue({
 el: '#app',
 data: {
  tree
 },
 components: {
  TreeMenu
 }
 })

請記住,我們的數(shù)據(jù)結構有一個根節(jié)點。我們在主模板開始遞歸調(diào)用 TreeMenu 組件,使用根 nodes 屬性來props:


 
 

下面是它目前的樣子:

Vue.js中怎么利用遞歸組件構建樹形菜單

正確的姿勢

在視覺上識別子組件的“深度”是很好的,這樣用戶就可以從UI中獲得數(shù)據(jù)結構的感覺。讓我們縮進每一層的子節(jié)點來實現(xiàn)這個目標。

Vue.js中怎么利用遞歸組件構建樹形菜單

這是通過增加一個depth prop定義,通過 TreeMenu 來實現(xiàn)。我們將使用這個值動態(tài)地將內(nèi)聯(lián)樣式與轉換綁定在一起:將使用transform: translate的CSS規(guī)則為每個節(jié)點的標簽,從而創(chuàng)建縮進。template.vue修改如下**:**


 

depth 屬性在主模板中從零開始。在上面的組件模板中,你可以看到每次傳遞到任何子節(jié)點時這個值都會遞增。


 
 

注意:記得 v-bind depth值以確保它是一個JavaScript數(shù)字類型而不是字符串。

展開/收起

由于遞歸數(shù)據(jù)結構可能很大,所以顯示它們的一個很好的UI技巧是隱藏除根節(jié)點以外的所有節(jié)點,以便用戶可以根據(jù)需要展開或收起節(jié)點。

為此,我們將增加一個局部屬性showChildren 。如果他的值為False,子節(jié)點將不會被渲染。此值應通過點擊節(jié)點切換,所以我們需要使用一個單擊事件的監(jiān)聽器方法 toggleChildren 來進行管理。template.vue文件修改如下**:**


 

以上就是Vue.js中怎么利用遞歸組件構建樹形菜單,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


當前名稱:Vue.js中怎么利用遞歸組件構建樹形菜單
瀏覽路徑:http://weahome.cn/article/jhghoe.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部