姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)

首先说为什么需要用slot?

假设我们有一个需求,如下:


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第1张图片
打印情况如下


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第2张图片

我们需要在除了p标签之外,还要展示一段内容,这段内容不是自己决定的,而是通过父组件传递过来的


于是我们会想到,用插值表达式的方式,是否能够实现呢?父组件中传递一个content,使用props接收,并写入插值表达式中,这样不就能接受到了吗?如图:


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第3张图片
打印情况如下


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第4张图片

我们会发现p标签并没有直接显示成我们所想要生成的p标签,而是被做了一次转译

插值表达式的方式行不通,我们换一种方式

使用v-html来绑定这个content


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第5张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第6张图片

但是这里会有一个问题,虽然我们已经将p标签渲染出来了,但p标签多了一层div包裹,我们的需求是只想显示一个p标签。到这里我们会思考,模板占位符行不行?因为它不会渲染出标签,如图:


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第7张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第8张图片

到这里我们可以看到,模板占位符是不好用的,渲染不出我们想要的p标签,所以没办法,我们只能通过一个div标签包裹的形式来呈现了。传入少量内容还可以,但是传入很多内容的时候,我们就会发现这个代码很难去阅读了


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第9张图片

这时候我们就来引入了插槽这个概念了。它能帮助我们实现只插入p标签的这样一个功能


Vue中新的一个语法,插槽(slot)

一、单个插槽


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第10张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第11张图片

我们首先在父组件中用的时候,插入了一点内容( 

Fran

  ),接着在子组件中用slot就可以成功使用插槽渲染了。再接着我们将p标签改为h1标签,我们可以发现渲染的文字明显变大了


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第12张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第13张图片

所以我们只需要在父组件中定义,向子组件传递DOM元素,在子组件中用slot标签引用,便可以渲染使用了。


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第14张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第15张图片

插槽还可以显示默认内容,在父组件中如果不写入元素标签的话,插槽会显示默认内容




二、具名插槽

如果我们想显示一个分区块的页面内容,我们需要使用到具名插槽,首先,我们在父组件中写入两个div标签,分别定义他们的class名称


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第16张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第17张图片

在这里,我们会看到这不是我们想展现的页面结构,我们想显示的是header-content-footer的形式,这里我们就需要使用具名插槽了。


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第18张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第19张图片

我们首先在父组件中插入的标签给定一个slot名字,在子组件中加上一个相应的name名字,这样就可以实现我们想要的效果了。(如果我们一次性需要用到多个DOM结构,这时候就可以使用具名插槽了,具名插槽也可以使用默认值)


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第20张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第21张图片



三、作用域插槽(带数据的插槽)


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第22张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第23张图片

首先我们现在slot里面定义一个循环,让父组件来告诉子组件需要如何渲染。

父组件首先需要写一个template标签,这是一个固定的写法,然后定义一个slot-scope,这个名字可以自己进行定义。然后如上图我们定义了一个li标签,里面写的是props.item,这代表我们的父组件想让子组件渲染出li标签,内容是每一项item。


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第24张图片


姚灶烽的笔记——Vue插槽的使用(理解Vue中的slot-和slot-scope)_第25张图片

如上图,这里我们的父组件写入的是h1标签,这就代表了父组件想让子组件渲染出h1标签。我们可以很明显的看到,这里的插槽内容变成了父组件自定义的h1标签。


最后我们来理一下作用域插槽的使用逻辑。首先父组件调用子组件的时候,先给子组件传了一个插槽,同时这个插槽用slot-scope声明这个插槽我要放在props里。

使用作用域插槽,子组件可以向父组件传递数据,父组件插槽如果想接收这个数据必须在外层使用一个