vue學習 slot插槽學習

2021-09-20 06:16:26 字數 332 閱讀 5585

不使用插槽,在template中用v-html解析父元件傳來的帶有標籤的content

使用插槽,如果父元件為空,就會顯示slot中定義的預設內容

rachel

vue.component('child', )

使用插槽新增header和footer,使用『具名插槽』,也就是給插槽起個名字,各找各的位置。此處也可以寫預設值,如果父元件沒有對應的插槽內容的話,會顯示子元件定義的插槽的預設值。

footer

vue.component('body-content', )

vue中的slot插槽學習記錄

vue中插槽主要是 在父元件中對映子元件資料及內容用的 在沒有改版之前分為 普通插槽 具名插槽 作用域插槽 帶著資料的插槽,就是可以直接使用父元件對映過來的值 根據名字不同,很容易就明白作用了 廢棄了就只做個了解 改版之後,使用v slot來表示,且限制了只能用在 component和templat...

Vue學習筆記 元件的插槽slot

插槽slot 子元件中加入標籤,父元件呼叫子元件時,雙標籤的內容,就會複製到slot中 template 插槽slot 插槽中使用子元件 父元件使用slot時,可以使用其他子元件 插槽中使用資料項 父元件使用slot時,可以使用資料項 動態資料 父元件模板裡呼叫的資料屬性,使用的都是父元件裡的資料 ...

Vue 使用插槽(slot)

當父元件向子元件傳值的時候,有時候,父元件傳的並不是單純的數值 字串,有可能是帶標籤 dom 的資料,那麼如何傳值呢?如果我們像正常父向子傳值那樣操作。content hello,slot slott 子元件 class slott div div template export default s...