本文主要是介绍[vue]插槽slot，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
[vue2.x]插槽slot
主要是用于占位，并在占位的位置展示指定的内容
插槽分为具名插槽与默认插槽，根据使用情况选择对应的插槽
vue中<slot> 元素作为承载分发内容的出口
组件中没有添加插槽
若是组件模板中没有添加插槽，则组件实例中的内容会被作废
<!-- todo-button 组件模板 --><button class="btn-primary">Create a new item
</button>
实例
<todo-button><!-- 以下文本不会渲染 -->Add todo
</todo-button>
展示结果
<button class="btn-primary">Create a new item
</button>
组件中只有一个插槽
只有一个位置需要插槽，可以使用默认插槽
模板
<!-- todo-button 组件模板 -->
<button class="btn-primary"><slot></slot>
</button>
插槽 替换 字符串
实例
<todo-button>Add todo
</todo-button>
展示结果
<button class="btn-primary">Add todo
</button>
插槽替换字符串是最简单的一种替换的形式，插槽还可以注入模板等
插槽 替换 模板
实例
<todo-button><!-- 添加一个Font Awesome 图标 --><i class="fas fa-plus"></i>Add todo
</todo-button>
展示结果
<button class="btn-primary"><!-- 添加一个图标的组件 --><font-awesome-icon name="plus"></font-awesome-icon>Add todo
</button>
组件中具有多个插槽
当组件中存在多个插槽的时候就需要用到具名插槽，用于区分对应的替换位置
<!-- todo-button 组件模板 -->
<button class="btn-primary"><slot name="icon"></slot><slot name="txt"></slot>
</button>
实例
<todo-button><label v-slot="txt">Create a new item
</label><i class="fas fa-plus" v-slot="icon"></i>
</todo-button>
展示结果
<button class="btn-primary"><font-awesome-icon name="plus"></font-awesome-icon>Create a new item
</button>
我们可以发现虽然在实例中txt在icon前，但是真正的呈现效果是模板中slot的顺序展示的
插槽作用域
因为插槽的内容本身是在父作用域中，所以插槽访问的是父组件的作用域，非子组件本身的作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
那么如果在父级模板中想要访问子组件的作用域怎么办？
我们希望的使用具体的某个子作用域中的数据进行展示怎么办
模板：
<!-- todo-button 组件模板 -->
<ul>
<li v-for="one in list">
<slot :item="one"></slot>
</li>
</ul>
实例
<todo-button>
<!-- 这里的item是list中具体的一项数据进行展示 -->
<template props={item}><label>{{item.txt+‘hhh’}}</label><i :class="item.class"></i>
</template>
</todo-button>
展示结果
<ul>
<li v-for="one in list">
<label>{{one.txt+‘hhh’}}</label><i :class="one.class"></i>
</li>
</ul>
[vue3.x]插槽slot的使用
vue中插槽的使用概念区别不大，只是使用的方法存在细微的调整
vue2.x之前是在template上通过在v-slot来使用具名插槽的，在vue3.x中通过 #插槽名使用的
例如模板：
<!-- todo-button 组件模板 -->
<ul>
<li v-for="(one,index) in list">
<slot name="mycustom" :item="one" :index="" :record=""></slot>
</li>
</ul>
父组件使用：
<todo-button><template #mycustom="{ item, index, record}">
//....
</template>
</todo-button>
这篇关于[vue]插槽slot的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
