[JavaScript知识库]VUE组件插槽简单易懂，又灵活

读前提要：在slot标签中添加内容，即变成了默认内容，若父组件没有插入东西，则使用其默认内容，以下实例省略

1、默认插槽

//子组件：：：：：：：：：：：：名称：Son.vue
<slot></slot>

//父组件：：：：：：：：：：：：
<Son>
<span>............</span>
</Son>

2、具名插槽

//子组件：：：：：：：：：：：：名称：Son.vue
<slot name='title'></slot>

//父组件：：：：：：：：：：：：
<Son>
<tempalte v-slot:tile>//v-slot:可以写成井号来代替：#
<span>............</span>
</tempalte>
</Son>

3、作用域插槽

现在规定：子组件里面有数据为：user:‘我是插’

第一种情况（slot没有name时候）

//子组件：：：：：：：：：：：：名称：Son.vue
<slot v-bind:row='user'>{{user}}的好朋友</slot>

//父组件：：：：：：：：：：：：
<Son>
<tempalte v-slot='scope'>//scope可以为容易字符串，代表slot的所有属性
<span>{{scope.row}}......</span>//显示:我是插
</tempalte>
</Son>

第二种情况（slot有name时候）

//子组件：：：：：：：：：：：：名称：Son.vue
<slot :row='user' name='title'>
{{user}}的好朋友</slot>

//父组件：：：：：：：：：：：：
<Son>
<tempalte v-slot:title='scope'>//
<span>{{scope.row}}......</span>//显示:我是插
</tempalte>
</Son>