vue 遞迴元件的使用及元件間的資料傳遞

背景

專案需求

由此可以判斷，這是乙個遞迴元件的呼叫

這樣的資料結構即是我們通過children去遞迴元件。

到這裡我們看似完成了這個資料結構。如果只是展示性質的遞迴元件，到這裡我們就ok了。可是我們的需求是元件還可以操作，有資料的互動，新增刪除資料。那麼我們就該想，遞迴元件該怎麼來通知我修改了誰的資料？

走到這裡我們可能就要考慮資料該放哪兒？該在哪兒去修改資料最為合適？怎麼通知資料，我是誰，我修改了誰？既然遞迴元件，大家都一樣，這該通知誰呢？我又是遞迴的第幾層修改的資料呢？

這樣我們大概從資料上來說知道了修改了哪一層次的資料。現在看來資料結構就差不多了。剩下的疑問我們放到下面的元件間資料傳遞。

所以最終我決定使用event bus

到這裡我們就成功了一半，event bus有個***就是如果不及時登出監聽，則會出現多次呼叫的情況，大大的降低了效能。所以一定不要忘了登出事件監聽尤大大也就此給出了解決方案

>

class
="content-condition"
>
v-model
="activename"
accordion
>
name
="1"
>
slot
="title"
>
v-model
="condition"
placeholder
="請選擇"
style
="width
: 80px;
" :disabled
="!datatype"
>
v-for
="item in operator"
:key
="item.id"
:label
="item.label"
:value
="item.id"
/>
q-select
>
type
="primary"
:disabled
="!datatype"
class
="add-btn"
@click.stop
="addcondition('single')"
>
class
="iconfont iconqax-icons-tianjiaxiang-yuanxing"
/>
新增條件
q-button
>
type
="primary"
:disabled
="!datatype"
class
="add-btn"
@click.stop
="addcondition('group')"
>
class
="iconfont iconqax-icons-tianjiaxiang-yuanxing"
/>
新增條件組
q-button
>
v-if
="type==='children'
" type
="danger"
class
="add-btn"
@click.stop
="deletegroup()"
>
class
="iconfont iconqax-icons-shanchuxiang-yuanxing"
/>
刪除條件組
q-button
>
template
>
v-for
="item in grouplist.conditionlist"
:key
="item.id"
class
="condition-item"
>
type
="text"
class
="icon"
@click
="deletecondition(item.id)"
>
class
="iconfont iconqax-icons-shanchuxiang-yuanxing"
/>
q-button
>
class
="condition-select"
>
v-model
="item.value"
>
v-for
="e in item.options"
:key
="e.id"
:label
="e.label"
:value
="e.id"
/>
q-select
>
div>
/>
div>
v-if
="grouplist.children && grouplist.children.length > 0"
>
v-for
="item in grouplist.children"
:key
="item.id"
>
:group-list
="item"
type
="children"
/>
div>
div>
q-collapse-item
>
q-collapse
>
div>
template
>

vue 元件及動態元件使用

在註冊乙個元件的時候，我們始終需要給它乙個名字，該元件名就是vue.component的第乙個引數。元件命規則 1 使用 kebab case vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時，你也必須在引用這個自定義元素時...

vue中遞迴元件的使用

元件中需要元件呼叫自身，這就是遞迴元件，遞迴元件需要宣告name和自己引入自己並宣告註冊為元件，並且需要使用props進行傳參，其還需要乙個停止條件，否則會進入死迴圈。vue的遞迴元件和其v for指令之間的關係和js中的for迴圈和遞迴函式一樣，乙個是有盡頭，乙個是不知道到底巢狀了多少層級。在vu...

vue筆記 遞迴元件的使用

元件自身去呼叫元件自身。template div div class item v for item,index of list key index div class item title border bottom span class item title icon span div div ...