vue插槽slot的使用方法什么是插槽？ 插槽是子组件为父组件提供的占位符，如果父组件需要填充一些代码片段或内容才能使用子组件，则可以使用slot填充占位符父组件的内容将被替换为子组件的快照。
1 .简单示例子组件
template div h1插槽的简单使用/h1 div style=' margin-top :30 px； font-size:20px；' slot/slot /div /div/template父组件
template divChild div简单用法简单用法/div/Child /div/template效果
父组件的代码片段将替换子组件的slot
2 .命名插槽(即命名插槽slot name=“xxx”/slot ) )在父部件中使用子部件时，可能会在多个位置使用插槽。 在这种情况下，请使用命名的插槽。 没有名称的话，不知道对应的是哪个地方。
子组件
template div div h1这是子组件的前端插槽/h1 div style=' margin-top :20 px； font-size:20px；' slot name=' header '/slot/div/divdivstyle=' margin-top :30 px；' h1这是部件的尾槽/h1 div style=' margin-top :20 px； font-size:20px；' sot name=' footer '/slot/div/div/div/template父组件
templatedivchilddiv-slot=' header '头部头部/div div v-slot='footer '尾部/div /Child /div/template效果
那么，更改父部件中的两个div的位置会有影响吗？
也就是说
父组件
templatedivchilddiv-slot=' footer '尾部/div div v-slot='header '头部/div /Child /div/template效果
可见实际上没有影响。 他根据名称找到并替换子组件中与槽对应的位置。
3 .如果缺省插槽子组件包含未命名的插槽，并且父组件也使用未命名的插槽，则缺省情况下，她将替换未命名的插槽。
子组件
template div div h1这是子组件的前端插槽/h1 div style=' margin-top :20 px； font-size:20px；' slot name=' header '/slot/div/divdivstyle=' margin-top :30 px；' h1这是默认插槽/h1 div style=' margin-top :20 px； font-size:20px；' slot/slot/div/divdivstyle=' margin-top :30 px；' h1这是部件的尾槽/h1 div style=' margin-top :20 px； font-size:20px；' slot name='footer'/slotgt
; </div> </div> </div></template>父组件
<template> <div><Child> <div>默认默认默认</div> <div v-slot="header">头部头部头部</div> <div v-slot="footer">尾部尾部尾部</div> </Child> </div></template>效果
如果子组件中有多个默认插槽呢？
子组件
<template> <div> <div> <h1>这是子组件的头部插槽</h1> <div style="margin-top:20px;font-size:20px;"> <slot name="header"></slot> </div> </div> <div style="margin-top:30px;"> <h1>这是默认插槽</h1> <div style="margin-top:20px;font-size:20px;"> <slot></slot> </div> </div> <div style="margin-top:30px;"> <h1>这是默认插槽</h1> <div style="margin-top:20px;font-size:20px;"> <slot></slot> </div> </div> <div style="margin-top:30px;"> <h1>这是子组件的尾部插槽</h1> <div style="margin-top:20px;font-size:20px;"> <slot name="footer"></slot> </div> </div> </div></template>父组件
<template> <div><Child> <div>默认默认默认</div> <div v-slot="header">头部头部头部</div> <div v-slot="footer">尾部尾部尾部</div> </Child> </div></template>效果
可以看出他会填充到每一个默认插槽中。
当同一些数据需要不同的展示效果的时候你可以使用作用于插槽，也就是数据插槽。
子组件
<template> <div> <div> <slot :data="slotData"></slot> </div> </div></template><script>export default { data() { return { slotData: [ { name: "王一", age: "15" }, { name: "钱二", age: "16" }, { name: "勤劳的树叶", age: "18" }, { name: "暴躁的橘子", age: "22" } ] }; }};</script>父组件
<template><div> <h1>第一种</h1> <Child> <template slot-scope="user"> {{ user.data }} </template> </Child> <h1>第二种</h1> <Child> <template slot-scope="user"> <div v-for="item in user.data" :key="item"> <p>我叫{{ item.name }}，今年{{ item.age }}岁。</p> </div> </template> </Child> <h1>第三种</h1> <Child> <template slot-scope="user"> <div v-for="item in user.data" :key="item"> <p>{{ item.name }}：{{ item.age }}</p> </div> </template> </Child> </div></template>效果