前言
城建实习的时候,有用到过几次作用域插槽,之前看课的时候算是一知半解,看自己记得笔记也挺多疑惑,这里就再重新整理一下吧。
插槽的作用:父组件的内容可以在子组件内展示,即父传子
一、默认插槽
/* 父组件 标签navigation-link为子组件的名字 标签内内容为要传过去的值*/
<navigation-link url="/profile">
wanwan
</navigation-link>
/*子组件 即navigation-link组件*/
<div>
<slot></slot>
</div>
当组件渲染的时候,子组件 将会被替换为“wanwan”,实现父组件的内容在子组件里展示。
**注意:**插槽的作用域问题是需要考虑的,比如,父组件中的url属性,在子组件内是得不到的
/* {url}为undefined*/
<navigation-link url="/profile">
wanwan{
{url}}
</navigation-link>
官网解释: 该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”),而不能访问 的作用域。例如 url 是访问不到的
「父级模板」里的所有内容都是在「父级作用域」中编译的;「子模板」里的所有内容都是在「子作用域」中编译的。
二、具名插槽
具名插槽的主要功能是:解决需要同时用多个插槽的情况。
<div>
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
</footer>
</div>
/*子组件*/
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
PS:这样就能实现一个萝卜一个坑了,其中一个不带 name 的 出口会带有隐含的名字**“default”**。
三、作用域插槽
这也是最近用的最多的吧,elementUI里面也会用到,公司的代码里也有好几处都有。
首先还是要理解上面所说的那句话:
「父级模板」里的所有内容都是在「父级作用域」中编译的;「子模板」里的所有内容都是在「子作用域」中编译的。
想让插槽内容(父组件)能够访问子组件中才有的数据,前两种插槽是无法实现的,因为父级模板里面没有子组件内的数据,直接用会返回undefined。
解决方法就是作用域插槽
(这边先写最简单的,具名插槽和作用域不混用的简写情况,将来若有别的需求则看链接: 官网-slot)
/*子组件 绑定一个数据,传给父组件,「v-bind:」可简写为 「:」*/
<span>
<slot v-bind:user="user">
{
{ user.lastName }}
</slot>
</span>
/*父组件*/
<current-user v-slot="slotProps">
{
{ slotProps.user.firstName }}
</current-user>
**官网提示:**只要出现多个插槽,请始终为所有的插槽使用完整的基于 的语法:
<current-user>
<template v-slot:default="slotProps">
{
{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
slot-scoped
这个在2.6.0之后就被废弃了,但是现在还能用,而且像ElementUI也还在用,还是需要学习一下的,知其然且知其所以然嘛。
“在template标签使用特殊的 slot-scope attribute,可以接收传递给插槽的 prop ”
<template slot-scope="{row}">
<el-select v-model="row.type" placeholder="请选择">
<el-option v-for="item in picTypeSelectOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
比如上述代码,接收了那一行的数据,传递给了插槽(子组件),然后里面就可以用各种数据(而且不加这个插槽还会出问题,渲染的时候会达不到自己想要的效果。)