slot插槽新旧语法
如果引用的组件没有使用插槽，那么组件标签中的内容都会【被舍弃】
Vue2.6新语法(统一)
在 Vue2.6.0 中，具名插槽和作用域插槽引入新的统一的语法 ( v-slot 指令)。它同时取代了 slot 和 slot-scope，这两个目前已被废弃但未被移除。
注意
具名插槽与作用域插槽的新版语法不能与旧版语法混用，否则直接全局报错。
区别如下
【定义插槽无新版与旧版差别】
js
// 定义SlotTest.vue
<template>
<div>
<p>===========插槽测试===========</p>
<slot name="testName" :TestData="TestData">插槽默认内容</slot>
</div>
</template>
...
data() {
return {
TestData: {name: 'chaos'}
}
}旧版语法
使用slot指定name，slot-scope接收插槽暴露的prop
js
<SlotTest>
<span slot="test" slot-scope="suibian">SlotTestContent: {{suibian}}</span>
</SlotTest>新版语法
v-slot可以只指定插槽的名称。如果需要，也可以同时接收props。
v-slot只能写在组件名称或者template上
WARNING
Vue3只支持新版语法，旧版本语法只能在Vue2中使用
js
<!-- 新版插槽写法：v-slot:SlotName="SlotProps" -->
<SlotTest>
// v-slot 只能用在template或组件上
<template v-slot:testName="TestData">SlotTestContent: {{TestData}}</template>
</SlotTest>
// 或者【不推荐写法，如果有默认插槽就不好写了，记住上面的就好了】
<SlotTest v-slot:test="data123">SlotTestContent: {{data123}} </SlotTest>
// 缩写语法 # 参考：https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99
<SlotTest #test="data123">SlotTestContent: {{data123}} </SlotTest>