slot插槽的用法

2021-09-02 08:00:14 字數 915 閱讀 9521

1. 基本用法

父頁面向子元件裡插入的標籤(一般情況下, 插入單個)

>

my name is tom!

<

/p>

<

/child>

<

/div>

vue.

component

('child',)

;let vm =

newvue()

;

2. 具名用法
父頁面向子元件裡插入多個標籤

>

"header"

>這是頭部<

/div>

"footer"

>這是腳部<

/div>

<

/contentbox>

<

/div>

vue.

component

('contentbox',)

;new

vue(

);

3. 作用域用法
父頁面可以根據實際需求向子元件裡插入不同的標籤

>

"props"

>

}<

/div>

<

/template>

<

/child>

<

/div>

vue.

component

('child',}

, template:

` `,

});new

vue(

);

Vue插槽slot的用法

2.6.0中,使用v slot 以前具名插槽 slot,作用域插槽 slot scope 用法一 插槽內容 template 核心 承載元件的分發內容。定義,在 的模板中 呼叫,呼叫對應的元件 your profile 渲染結果 your profile 用法一 插槽內容 render 定義,在 的...

vue插槽slot的用法

插槽就是子元件提供給父元件的乙個佔位符,當父元件使用子元件需要填充一些 片段或者內容的時候可以使用slot進行佔位填充。父元件中的內容就會將子元件中的slot替換。在父元件中使用子元件時,可能有不止乙個地方使用插槽,這個時候就要使用具名插槽。如果不帶名稱的話,就不知道對應的是哪個地方。當同一些資料需...

Vue 特性插槽slot 用法總結

vue的一些特性和方法學習,說一千道一萬不如乙個例子帶來的直觀,下面就是乙個完整的例子來總結 slot各種型別的插槽用法 關於slot這個特性,理解起來要注意幾點 1 slot這個特性設計的目的就是讓子元件能非常方便在父元件上進行擴充套件,子元件的最終頁面呈現極大程度依然于父元件下面的模板如何寫。2...