1. 具名插槽
具名插槽主要使用步骤
- vue2.0版本
1. 给某组件中的slot标签添加 name="a" 代表叫a的插槽 默认名字为default
2. 在使用组件的时候,填充插槽内容 使用slot="a" 代表向a插槽填充内容
- vue3.0版本
3. 给组件中的slot标签添加 name="a" 代表叫a的插槽 默认名字为default
4. 在使用组件的时候,填充插槽内容 使用v-slot:a 代表向a插槽填充内容
官方的代码示例如下:
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
</footer>
</div>
这是我们的父组件 暂时叫做baseLayout 如果想吧指定内容填充到指定区域 需要使用插槽
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
像这样指定了slot的名字
接着在使用baselayout组件的时候,填充自己的内容
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
外面必须包裹一个template 在template上使用v-slot来指定插槽的名字 这样可以按照指定的位置来显示了
2. 作用域插槽
使用场景: 假设我们现在有一个组件current user
<span>
<slot>{{ user.lastName }}</slot>
</span>
当前组件中有一个user数据 我们吧这个数据内容当作默认内容 当我们需要修改的时候应该这样调用
<current-user>
{{ user.firstName }}
</current-user>
这个时候就会出错, 因为我们当前的父组件里面 没有user这个数据 user这个数据只能在current-user这个组件中使用 这里就要用到作用域插槽了
我们将user数据作为 插槽的一个属性绑定上去 然后通过插槽的这个属性来拿到数据
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
使用v-slot:default=“slotprops” 表示名字叫default的插槽 作用域i叫slotprops 这样可以通过slotprops 来拿到子组件的数据 vue2.0使用 slot-scope=”slotprops “来命名
最后一些封装好的组件 比如 el-tree el-form table表格 选择器 级联器可以直接在组件里面使用作用域插槽来拿这个组件的数据
<el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
<!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容 => 有多少个节点循环多少次 -->
<!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
<!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
<tree-tools slot-scope="obj" :tree-node="obj.data" @delDepts="getDepartments" />
</el-tree>
tree-tools是自定义的组件 如果想拿到el-tree的data数据 使用作用域插槽
我又来了 之前一直不明白为啥这里的作用域插槽放在了el-tree里面,按照我的理解作用域插槽应该是为了拿子组件的数据,为什么我不定义在el-tree上,这里因为el-tree是一个树,循环渲染的,相当于v-for 每一层都有一个slot插槽,所以放到el-trree里面,可以为每一层树结构去填补数据,使用作用域插槽 拿到当前这层树的数据 el-tree的data是一个Array 而obj.data是一个对象 两者不一样
一起加油~~