Vue 特性插槽slot 用法總結

2021-09-19 01:26:38 字數 554 閱讀 6893

vue的一些特性和方法學習,說一千道一萬不如乙個例子帶來的直觀,下面就是乙個完整的例子來總結

slot各種型別的插槽用法

關於slot這個特性,理解起來要注意幾點

1:slot這個特性設計的目的就是讓子元件能非常方便在父元件上進行擴充套件,子元件的最終頁面呈現極大程度依然于父元件下面的模板如何寫。

2:(2.6.0以後版本棄用slot和slot-scope,改用v-slot)

【vue2.6 寫法】向預設slot插入的內容aaaa

【vue2.6 寫法】hi, }

【vue2.6 寫法】向具名slot插入的內容

【vue2.6之前舊寫法】具名插槽

【vue2.6之前舊寫法】

你好:}}}

}-->

【vue2.6 新寫法】具名插槽,msg}

【vue2.6新寫法】

你好:}

}

效果如下圖

Vue插槽slot的用法

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

vue插槽slot的用法

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

Vue2 x 插槽slot用法

指令 v shot 說明 插槽就是子元件中的提供給父元件使用的乙個佔位符,用 表示,父元件可以在這個佔位符中填充任何模板 如 html 元件等,填充的內容會替換子元件的標籤 使用示例 子元件 子元件自定義按鈕 父元件引入使用 這時頁面顯示 當父元件未傳任何內容時,則預設編譯子元件中的內容。如果在父元...