这篇文章主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、slot作用/概念：预先将将来要使用的内容进行保留；
2、具名插槽：给slot起个名字
3、slot、slot-scope已经被废弃推荐使用vue2.6.0中的v-slot；但是这边还是对新旧方法对做一下使用说明。
slot插槽(不具名)
<div id="app"> <div>slot插槽占位内容</div></div> <div> //定义插槽 <h3>这里是test组件</h3></div>
slot具名插槽使用
在组件中使用slot进行占位时，在slot标签内使用name 属性给slot插槽定义一个名字，就是具名插槽。在html中使用具名插槽时，使用slot引入
<div id="app"> <div>这里是头部</div>//具名插槽使用 <div>这里是尾部</div></div> <div> //具名插槽 <h3>这里是Test组件</h3></div>
v-slot使用
v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容
<div id="app"> //v-slot指令使用插槽 <h2>slot头部内容</h2><p>直接插入组件的内容</p> <h2>slot尾部内容</h2></div> <div class="container"> <header> <!-- 我们希望把页头放这里 -->//具名插槽 </header><section> 主体内容部分 </section><footer> <!-- 我们希望把页脚放这里 --></footer></div>
作用域插槽：
slot-scope使用：
a、：在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。
b、：在组件使用时，通过slot-scope=“gain”,接收组件中slot标签上绑定的数据。
c、:通过gain.xxx就可以使用绑定数据了
<div id="app"> <div>//作用域插槽的用法（slot-scope） {{ gain.msg }} </div></div> <div> <p>这里是test组件</p></div>
作用域插槽：v-slot的用法
<div id="app"> //v-slot定义作用域插槽 <div> <h3>slot</h3><p> {{gain.msg}} </p></div></div> <div> <p>这里是test组件</p></div>
Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家要注意。
补充知识：vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别
不具名插槽
子组件：
<div> <!--定义不具名插槽 --><h3>这里是不具名插槽组件</h3></div>
在父组件中使用：
<div id="inforCategory-warp"> <!-- 不具名插槽 -->不具名插槽</div> #inforCategory-warp { }
作用域插槽：本文来源gaodai#ma#com搞*!代#%^码$网*
slot-scope使用(slot-scope绑定的是子组件的数据)：
在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。
在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。
通过scope.xxx就可以使用绑定数据了
具名插槽以及作用域插槽
子组件：
<div> <h3>这里是具名插槽组件</h3></div>
父组件：
<div id="inforCategory-warp"> <!-- 具名插槽 --> <div>这里是slot-scope<span style="color:red">{{scope.msg}}</span>头部</div><div>这里是尾部</div></div> #inforCategory-warp { }
v-slot以及作用域插槽
子组件:
<div> <div class="container"> <header> <!-- 我们希望把页头放这里 --></header><section> v-slot组件 </section><footer> <!-- 我们希望把页脚放这里 --></footer></div></div>
父组件：
<div id="inforCategory-warp"> <h2>slot头部内容</h2><p>直接插入组件的内容</p> <h2>slot尾部内容<span style="color:red">{{scope.msg}}</span></h2></div> #inforCategory-warp { }
以上就是Vue插槽_特殊特性slot,slot-scope与指令v-slot说明的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
