1. 程式人生 > >(十二)vue.js元件——元件高階用法(5)

(十二)vue.js元件——元件高階用法(5)

1)遞迴元件

類似於js函式可以遞迴一樣,元件也可以遞迴呼叫,即自己呼叫自己。

要實現元件遞迴,過程如下:

1.第一步:給元件本身加上一個name屬性
2.第二步:當然為了遞迴時不會無限的執行下去,你必須加一個結束條
件來限制遞迴數量。
3.第三步:實現一次呼叫

在這裡插入圖片描述
注意:其實name可以和元件名不一樣,但是name的值和遞迴呼叫時必須一樣。然後他能用在一些級聯選擇器和樹形控制元件上。

2)內聯元件

前面我們已經講了,在元件標籤中給內容預設會被忽略,除非你在在子元件中寫slot插槽,這樣的話元件標籤中的內容就會被渲染進行子元件裡面。

在這裡,我們就要說下,如果你在子元件標籤中給了內容,只要在子元件標籤上給定一個inline-template屬性,這時即便你沒有在子元件中給上slot插槽,資料仍然能夠保留,】

保留形式:
會把你在父元件中寫的子元件標籤與子元件標籤中的內容全部作為父元件的部分內容。
而且,在這個子元件標籤裡面,我們還可以直接獲取子元件的資料!這無疑的讓我們的父元件模板更加靈活了。
寫在內聯元件中的內容最外層應該有且僅有一個標籤
在這裡插入圖片描述
現在好像不能夠在內聯模板中使用父元件的資料了。

3)動態元件

前面寫程式碼時,基本上是,元件掛載了就寫死了,現在的話我們可以通過一個特殊的元素<component>在加上is屬性,實現動態的掛載不同的元件。

任何元件都可以用component+is屬性實現掛載

當然前提是,作為is值的元件名是is屬性所在範圍內訪問到的。
在這裡插入圖片描述
通過動態的修改is屬性的值,可實現動態掛載不同的元件


在這裡插入圖片描述

注意:
只要是當前component標籤所在訪問得到。