Vue學習教程之插槽

2021-10-22 13:33:01 字數 552 閱讀 2558

前言

我們在寫頁面的時候可能會遇到如下需求:

var componentslot2 = ;

data: ,

components:

});

我們定義了乙個元件後,在 template 中定義更改為:

template: '我是子元件的 p

你好呀'

於是我們採用另一種方式:將 html 作為值從父元件傳入子元件中,

template:

,

插槽一般用法:

// 定義乙個元件

componentslot = ;

這次可以直接將要在子元件中顯示的 html 直接新增到定義子元件下。這裡我只新增了乙個,其實將我是子元件的

變換為許多標籤都可以

具名插槽

我是子元件的 p

footer

// 定義乙個元件

var componentslot1 = ;

好了,今天就是這個吧。寫得比較隨意,不喜勿噴。

vue學習 slot插槽學習

不使用插槽,在template中用v html解析父元件傳來的帶有標籤的content 使用插槽,如果父元件為空,就會顯示slot中定義的預設內容 rachel vue.component child 使用插槽新增header和footer,使用 具名插槽 也就是給插槽起個名字,各找各的位置。此處也...

前端學習(2619) vue插槽 具名插槽

插槽的最最簡單使用,上面已有例子,這裡就不寫了,接下來看看,插槽其他使用場景 描述 具名插槽其實就是給插槽娶個名字。乙個子元件可以放多個插槽,而且可以放在不同的地方,而父元件填充內容時,可以根據這個名字把內容填充到對應插槽中。如下 1.子元件的 設定了兩個插槽 header和footer 2.父元件...

最簡單易懂的 vue 插槽教程

my slot div test 我是頭部header 我是中間slot 我是尾部footer div template body js 部分 vue.component my slot newvue 上面 註冊了乙個元件,然後在 div 裡渲染這個元件,頁面顯示如下 我是頭部 我是中間 我是尾部 ...