前言：之前學vue對插槽只有乙個模糊的存值概念，最近在封裝自定義元件時，再次學習一下。
通過slot插槽向元件內部指定位置傳遞內容，通過slot可以父子傳參，簡化了進行自定義元件的封裝和使用。
自己對插槽理解
就是乙個站位html模板，用來攜帶內容，插入到合適的位置，由父元件來決定其顯示的內容，使得模組具有更強的復用性。
就是沒有名字的插槽，乙個元件裡面只允許存在乙個匿名插槽。父元件內容
class="fa">
父元件中寫的文字p>
child>
div>
複製**子元件內容
class="child">
匿名插槽的預設內容slot>
div>
複製**編譯結果如下：
class="fa">
class="child">
父元件中寫的文字p>
div>
div>
複製**
slot 元素有乙個name特性，可以為slot命名，多個 slot 可以有不同的名字，用來渲染不同的內容。
父元件內容
class="fa">
class="son"
slot="s1">
111span>
div>
class="son"
slot="s2">
222span>
div>
class="son">
333span>
div>
child>
div>
複製**子元件內容
class="child">
// s1插槽
name="s1">
slot>
// s2插槽
name="s2">
slot>
// 匿名插槽
slot>
div>
複製**編譯結果如下：
class="fa">
class="child">
class="son">
111span>
div>
class="son">
222span>
div>
class="son">
333span>
div>
div>
div>
複製**具名插槽的縮寫方式
class="fa">
class="son" #s1>
...div>
child>
div>
複製**
在父元件中渲染子元件的內容，並且將子元件資料傳遞到插槽中
父元件內容
class="fa">
v-slot="props">
}template>
child>
div>
複製**注意點1：在vue 2.6+中，如果只存在預設插槽，可以用以上簡寫法 ,否則必須完整書寫： v-slot:default="props" 注意點2：在vue 2.6+ 引入了v-slot 指令，在接下來所有的 2.x 版本中 slot 和 slot-scope 還可以使用，但不會出現在 vue 3.0 中，詳細的內容自己查閱官方文件吧。
子元件內容
class="child">
v-for="item of arr" >
:item="item">
slot>
li>
ul>
div>
data()
}複製**編譯結果如下：
class="fa">
class="child">
111li>
222li>
333li>
ul>
div>
div>
複製**從 vue2.6 開始，新增了動態指令引數，利用 [ ]，如下例子：
v-bind:[attributename]="url" />
複製**
data() }
複製**
還可以用於 v-on 繫結動態事件、a標籤 的連線等。
:src="url" />
複製**
v-slot:[slotname]>
...template>
child>
複製**
v-slot：default="props">
}template>
v-slot:s1="props">
}template>
child>
----------------------------------------兩種寫法，不可混用 -->
}template>
}template>
child>
複製**
vue插槽樣式 vue中的插槽slot
插槽 slot 是元件的一塊html模板，父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置，父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個，可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...
vue中的slot（插槽）
1 slot 基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import vue from vue 定義元件componentone const compoentone 呼叫元件 newvue el id data template 使用插槽 2 具名插槽 給具體的插槽命名，並在使用的時...
Vue中的插槽 slot
一 什麼是插槽？二 怎麼用插槽？2.1預設插槽 子元件 template div class slotcontent ul li v for item in items li ul div template script export default script style scoped styl...