Vue|Vue初学——插槽，具名插槽，作用域插槽 javascript|前端|vue.js

文章目录

前言
一、插槽的基本使用
二、具名插槽
- 为什么需要具名插槽
三、作用域插槽
总结

【Vue|Vue初学——插槽，具名插槽，作用域插槽】
前言插槽，这个东西就和它的名字一样，是插在需要的地方的。
它的作用就好比是一个母版页，有固定的写好的东西，也有需要不断改变的东西。
又好比你写一个网站，而这个网站中有许多页面，而这几个页面中都有相似之处，但也有不同之处。
而这种内容，在vue中往往就要通过插槽slot来实现
提示：以下是本篇文章正文内容，下面案例可供参考
一、插槽的基本使用在引用了vue后，有着一个叫slot的标签，只要写好这样一个标签，就会有了一个插槽。

>

当然也可以在里面写东西，这样一来，使用这个插槽就会默认显示这里面的东西

>hello

在组件中使用默认插槽的实例

- 锐客网 src="https://www.it610.com/vue.js" type="text/javascript" charset="utf-8"> >666 type="text/javascript"> let content={ template:'#cpn1' } let vm=new Vue({ el:'#app', data:{}, components:{ cpn1:content } });

文章图片

如图所示，不适用插槽，组件的内容都是一样的，而使用了插槽，
这里叫做默认插槽，就会显示默认的数据，上图中hello就是默认的数据.
其他的，只要在插槽中写什么就是什么了
二、具名插槽为什么需要具名插槽假设有一下需求
一个网站需要多个导航栏，导航栏中的布局方式至少有两处不相同
那么如果是一个不相同我们还可以通过默认插槽实现，但如果有多个呢？默认插槽写多个它会怎么区分呢？
因此，我们引出了具名插槽，给定一个名字，这样就可以对应着提供数据了
它的写法如下

name="center">

使用方法

在组件中使用具名插槽的实例

- 锐客网 src="https://www.it610.com/vue.js" type="text/javascript" charset="utf-8"> slot="right">Hello type="text/javascript"> let content={ template:'#cpn1' } let vm=new Vue({ el:'#app', data:{}, components:{ cpn1:content } });