vue的 slot 插槽的使用

2022-09-09 17:06:15 字數 1832 閱讀 2315

直接往裡寫就行,記住,元件中間,應該寫的是html標籤。

>

"movies"

:cmessage=

"message"

>

哈哈,我是插進來的<

/p>

<

/cpn>

<

/div>

"cpn"

>

}<

/p>

}<

/p>

<

/slot>

<

/div>

<

/template>

設定好預設元件,如果插值沒有傳值,那麼就可以使用預設值。

>

"movies"

:cmessage=

"message"

>

<

/cpn>

<

/div>

"cpn"

>

}<

/p>

}<

/p>

哈哈<

/p>

<

/slot>

<

/div>

<

/template>

指名替換的是那一部分插槽?

>

"a">你好<

/span>

<

/cpn>

<

/div>

"cpn"

>

"a">

哈哈<

/span>

<

/slot>

"b">

呵呵<

/span>

<

/slot>

<

/div>

<

/template>

<

!doctype html>

"cn"

>

"utf-8"

>

"viewport" content=

"width=device-width,initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

"">

<

/script>

document<

/title>

<

/head>

>

"a">你好<

/span>

<

/cpn>

<

/div>

"cpn"

>

"a">

哈哈<

/span>

<

/slot>

"b">

呵呵<

/span>

<

/slot>

<

/div>

<

/template>

const cpn =},

props:

["cmovies"

,'cmessage'],

// 可以是陣列,也可以是物件,

}new

vue(

, components:})

<

/script>

<

/body>

<

/html>

Vue插槽slot的使用

vue官方文件中關於slot插槽的說明很簡短,語言又寫的很凝練,這就有可能造成初次接觸插槽的開發者容易產生 算了吧,回頭再學,反正已經可以寫基礎元件了 的想法,於是就關閉了vue的說明文件。q 假如父元件需要在子元件內放一些dom元素,那麼這些dom是顯示呢還是不顯示呢?預設情況下是不會顯示的,如下...

VUE插槽 slot 的使用

經驗 問題描述 插槽 slot 是vue提出來的乙個概念,正如名字一樣,插槽用於決定將所攜帶的內容,插入到指定的某個位置,從而使模板分塊,具有模組化的特質和更大的重用性。插槽顯不顯示 怎樣顯示是由父元件來控制的,而插槽在 顯示就由子元件來進行控制。解決方法 幾種常見的插槽 1 預設插槽 父元件 在父...

vue插槽slot的使用

vue的slot是子元件向父元件提供html自定義模版,具體做法是子元件中定義slot模版,然後在父元件中使用template去填充子元件的slot部分,子元件可以通過在slot上新增屬性給父元件傳遞資料。主要使用在拓展元件上,比如 元件,讓父元件可以自定義每一行的不同情況下的按鈕,而子元件只需要關...