Vue之元件(插槽slot與可復用元件)

2021-09-29 04:40:37 字數 1577 閱讀 4831

作用:通過插槽slot可以更加方便的向子元件傳遞dom元素,同時子元件使用插槽內容也十分簡單,大大簡化了**,增加了**可讀性。

接下來結合具體案例來了解下… …

作用域插槽案例

(2)獲取資料:在父元件中使用 slot-scope 特性從子元件獲取資料

注意:

(1)在父級中,具有特殊特性 slot-scope 的元素必須存在,表示它是作用域插槽的模板(在 2.5.0+,slot-scope 能被用在任意元素或元件中而不再侷限於)。

(2)slot-scope 的值將被用作乙個臨時變數名,此變數接收從子元件傳遞過來的 prop 物件

(3)在子元件中,只需將資料傳遞到插槽,就像你將 prop 傳遞給元件一樣,接下來父元件中使用 slot-scope 特性從子元件獲取資料

應用場景:

(1)定義基本元件並引用

(2)子元件要實現乙個功能「迴圈顯示乙個列表」,所以首先需要引入資料,進行迴圈展示

(3)需求公升級

blog子元件可能在很多地方呼叫,希望在不同地方呼叫blog元件時

但是:注意這裡要求列表的迴圈和樣式不是由子元件決定,而是外部決定的,修改**如下

1、傳遞資料下圖:

2、獲取顯示資料下圖:

(3)需求公升級

此時,blog元件迴圈的每一項怎麼顯示,由外部告知決定

即父元件呼叫子元件時給子元件傳遞對應模板,完整**如下所示

(4)父元件修改模板

正如之前所說,blog元件迴圈的每一項怎麼顯示,由外部告知決定

即父元件呼叫子元件時給子元件傳遞對應模板,例如這裡我想將模板改為h6,如下所示

此時,模板便會呈現出父元件傳遞的樣式去顯示

(5)條件判斷渲染

到目前為止,便可以在元素上隨便操作了

例如:當書本名字長度等於3的時候,在前面加個「你好」標誌

vue 元件的 api 來自三部分——prop、事件和插槽:

vue父子元件slot插槽

關於父元件在使用子元件的時候,向子元件插入內容的方法 1 建立乙個子元件,並在vue例項中註冊 這是建立子元件 var testzujian 這是註冊子元件 let vm new vue 2 在html 中使用子元件 root testzujian div body 3 在vue例項中寫入想要插入到...

Vue元件化高階 slot插槽

元件的插槽 如何封裝合適?抽取共性,保留不同 插槽的基本使用 在template內部定義標籤 插槽的預設值 預設值 如果在父模板中,有多個值同時放入到元件中進行替換,將會一起作為替換元素 哈哈哈 span cpn 用span替換template中slot插槽裡內容 hehehe i cpn cpn ...

動態元件與slot插槽

切換 button component div vue.component a vue.component b newvue methods mount 上述切換涉及到兩個元件的建立和銷毀,對記憶體會有損耗,如果能將元件快取起來,就可以解決這個問題 切換 button include compone...