（一）前言
在react中，可以將元件理解為上下層級，使用children在子層級作為巢狀渲染，但是vue提供方案為slot，並且相對於react，還提供插槽的擴充套件功能，主要分為三種，匿名插槽（類似與children），具名插槽，作用域插槽 (可以提供資料繫結)。
(二) 匿名插槽
類似與react的children。
我們舉個粟子。
首先我們寫個元件如下
這是子元件
這是巢狀內部元件
巢狀的html模板最為子元素傳遞進入，那麼如何巢狀，將不會顯示slot標籤。
(三) 具名插槽
顧名思義就是給子元件slot提供標識的name，場景可以定義不同的插槽，根據名字實現外部元件選擇顯示什麼。
我們來擴充套件上面的元件
這是子元件
匿名插槽預設值
具名插槽up預設值
具名插槽down預設值
這是巢狀內部元件
這是巢狀up的內部元件
從結果我們可以看出來一下結果：
如果不傳down時候，插槽會使用預設值顯示
父元件不傳slot的名字，會預設使用匿名插槽，顧名思義
當傳入up，會覆蓋up插槽的預設值
即使我們給插槽down設定了樣式，樣式也不會生效
擁有命名的插槽不能被不含slot屬性的標籤內容替換，會顯示slot的預設值（具名slot具有對應性）；
(四) 作用域插槽
相對於其他兩個，作用域插槽需要繫結資料，也可以理解為帶資料的插槽。
我們首先改造元件
這是子元件
slot的預設內容
}
作用域插槽代表性的用例是列表元件，允許在parent父元件上對列表項進行自定義顯示，如下該items的所有列表項都可以通過slot定義後傳遞給父元件使用，也就是說資料是相同的，不同的場景頁面可以有不同的展示方式：
Vue 如何在Vue中使用樣式
使用class樣式 1.陣列 第一種使用方式，直接傳遞乙個陣列，注意 這裡的class需要使用 v bind做資料繫結 2.陣列中使用三元表示式 3.陣列中巢狀物件 4.直接使用物件 不用陣列包裹 既然是乙個物件，那我們也可以直接在data身上寫進行儲存 內聯樣式 1.直接在元素上通過v bind ...
如何在vue中使用樣式
1.陣列 這是乙個h2.陣列中使用三元表示式 這是乙個h3.陣列中巢狀物件 這是乙個h4.直接使用物件 這是乙個h5.使用內聯樣式 1.直接在元素上通過 style的的形式，書寫樣式物件 這是乙個h2.將樣式物件，定義到data中，並直接引用到 style中 在data上定義樣式 data 在元素中...
如何在 vue 中使用 svg symbols
安裝 svg sprite loadernpm install svg sprite loader d via yarn yarn add svg sprite loader d在vue.config.js中配置 svg sprite loaderconst path require path mo...