根本应用
组件通过slot预留地位，应用组件的时候，能够通过传递具体的内容去替换slot占用的中央，这就是插槽。
比方当初定义了一个组件：
<!--simple-use.vue--><template> <div> <slot></slot> </div></template>组件<slot></slot>占用的地位具体内容不确定，须要应用的时候传递进来，咱们就能够这样应用：
<simple-use> <em style='color:red'>传递给插槽的内容（能够是文本，标签或者组件等）</em></simple-use>最终的后果能够了解为：
<template> <div> <!-- <slot></slot> 这个标记的内容被上面的代替了 --> <em style='color:red'>传递给插槽的内容（能够是文本，标签或者组件等）</em> </div></template>给插槽一个默认值
有时候，咱们可能心愿slot有一个本人的默认值，在没有传递数据给组件的时候，应用默认数据。
想实现这样给性能很简略，只有在slot间接增加默认值即可，比方：
<!--default-content.vue--><template> <div> <slot> 没有传递数据时候的默认值 </slot> </div></template>应用的时候就能够传递或者不传递数据：
<default-content></default-content><default-content>这是传递的数据</default-content>最终的后果能够了解为：
<template> <div> 没有传递数据时候的默认值 </div></template><template> <div> 这是传递的数据 </div></template>咱们看见，第一个抉择了默认数据，第二个应用了传递进去的数据。
舒适提醒：父级模板外面的所有内容都是在父级作用域中编译的，子模板外面的所有内容都是在子作用域中编译的。
具名插槽
有时候slot可能有多个，为了对应起来，能够给slot起名字，传递的时候对应起来：
<!--name-slot.vue--><template> <ul> <li> <slot name='index1'></slot> </li> <li> <slot name='index2'></slot> </li> <li> <slot></slot> </li> </ul></template>咱们定义了三个slot，其中二个名字别离叫index1和index2，第三个没有定义名称，默认名称是default，因而，咱们在应用的时候就须要这样应用：
<name-slot> <template v-slot:index1> 中央1 </template> <template v-slot:index2> 中央2 </template> <template v-slot:default> 默认中央 </template></name-slot>咱们通过v-slot:name的形式把template模板和slot对应了起来，因而运行后的后果就是：
<!--name-slot.vue--><template> <ul> <li> 中央1 </li> <li> 中央2 </li> <li> 默认中央 </li> </ul></template>须要留神的是，v-slot只能增加在<template>上（不过"作用域插槽"这种状况除外）。作用域插槽
有时候咱们心愿在应用组件的是，让插槽内容拜访子组件中的数据，能够通过插槽 prop这个个性实现：
<!--scope-slot.vue--><template> <div> <slot v-bind:message='message'></slot> </div></template><script>export default { data() { return { message: "来自子组件中的数据" }; }};</script>应用的时候，咱们须要接管一下：
<scope-slot> <!-- 这里的default示意默认的，如果有多个插槽，改为对应的插槽名字 --> <template v-slot:default='sub_scope'> {{sub_scope.message}} </template></scope-slot>最终的后果就是：
<template> <div> 来自子组件中的数据 </div></template>