Vue2 x 插槽slot用法

指令：

v-shot

說明：插槽就是子元件中的提供給父元件使用的乙個佔位符，用 表示，父元件可以在這個佔位符中填充任何模板**，如 html、元件等，填充的內容會替換子元件的標籤

使用示例

子元件：

子元件自定義按鈕
父元件引入使用：

當父元件未傳任何內容時，則預設編譯子元件中的內容。

如果在父元件使用時自定義內容，則展示父元件定義的內容：

父元件定義按鈕

具名插槽

在slot標籤上增加name屬性，使用時，則需指定name，否則不生效，示例：

子元件：

子元件自定義按鈕
父元件引入使用：
父元件定義按鈕

具名插槽縮寫

將v-slot替換成#,示例：

父元件定義按鈕

子元件：

子元件自定義按鈕
父元件引入使用：
default>父元件定義按鈕

作用域插槽就是父元件插槽獲取子元件中的資料，示例：

子元件定義：

子元件自定義按鈕
父元件獲取子元件的資料：
default="childvalue">父元件定義按鈕
} 

其中childvalue是自定義的名稱，childvalue作為子元件所有資料的key，使用資料則以childvalue.key1形式

對應老版本使用則是slot-scope="childvalue"

具名插槽+作用域插槽不簡寫使用示例：

子元件：

子元件自定義按鈕
父元件：
父元件定義按鈕
} 

子元件：

header
main
footer
父元件：
} 
} 
} 

=後面是父元件獲取子元件的資料  

#是v-slot的縮寫  #default    #text  ===  v-slot:text     對應老版本寫法： slot="text"

v-slot和#只能寫在template標籤上面

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...