vue 實現元件遞迴(巢狀自身)

2021-10-10 06:30:45 字數 825 閱讀 5966

主要使用到了 元件中的name, 當我們設定了元件的name,元件遞迴呼叫自身使用的元件名為name;

例子

// 遞迴元件 demo.vue

for=

"(item, index) in treedata"

:key=

"index"

>

}<

/p>

="children" v-if=

"item.children"

>

<

!-- 巢狀自身 --

>

"item.children"

>

<

/demo>

<

/div>

<

/div>

<

/div>

<

/template>

export

default;}

,created()

,};<

/script>

.children

<

/style>父元件呼叫demo.vue

"treedata"

>

<

/demo>

// 模擬遞迴

treedata:[,

,,],

},],

},,]

,},]

,

效果

vue遞迴元件實現

需求 需要顯示不確定層級不確定值型別 可能是陣列裡有物件,物件裡有資料 的資料 資料結構如下 registered address registered address in full 241 rue jarry e montr al qu bec h2p1t6 canada industry co...

Vue遞迴元件

遞迴元件 在父元件內巢狀子元件,子元件無限迴圈使用自己,用於樹狀結構的巢狀 1 分為子元件son和父元件father 這裡的話我寫的是頂級只能有乙個根元素 father.vue檔案 第一層級 li list ul template export default script son.vue檔案 so...

vue父子元件通訊,巢狀元件

子傳父 子元件定義事件say click say 子傳父div methods裡面執行say方法,通過emit給父元件傳遞乙個叫sire的自定義事件,它會自動去父元件裡面尋找sire事件 say 父元件引用子元件模板 宣告型別 註冊元件 sire自定義事件必須與子元件給的一致 say event t...