vue 插槽的理解

原来一直不能够理解插槽的作用，最近看了一篇文章，对插槽的分类及作用都有详解

原文章地址：https://www.cnblogs.com/mandy-dyf/p/11528505.html

 

插槽就是子组件为父组件提供的一个可以在子组件内输入任意代码的空div，父组件在引入子组件后，可以使用这个子组件提供的空div任意输入代码，任意样式

如子组件未提供插槽，父组件在引入子组件后在子组件中输入的任何代码都不会显示

 

基本使用

先简单看一下插槽的作用

子组件定义插槽

 

父组件引入子组件并定义插槽内容

 

 运行结果看一下

 

 如果子组件去掉插槽，父组件不变时，

 

页面显示如下

 如图所示，页面不会显示父组件引入子组件后在子组件内定义的内容

 

 上面就是我们对插槽的一个基本认识，如果子组件不给父组件提供插槽的话，父组件是没办法给子组件添加任何html的

 

具名插槽

具名插槽简单来说就是给我们的插槽取一个名字，就像给div加一个id，class类名一样，一个子组件可以放多个插槽，放在任意位置

 

子组件定义两个具名插槽，定义方式：    name = '名称'

 

父组件填充代码，父组件使用具名插槽的方式官方有定义

 

 

 

 

运行结果

 

 

为了更加深刻理解具名插槽的作用，我们把父组件的插槽打乱顺序使用

 

父组件和子组件的插槽顺序调换，来看一下页面显示结果

显示结果依旧不变。因此我们可以得出以下结论

具名插槽的显示顺序是根据子组件定义的顺序渲染的，父组件填充内容时，是根据这个名字把内容填充到对应插槽中的，父组件只要插槽名字和子组件对应，他就会按照子组件的定义渲染

 

 

 默认插槽

具名插槽就是给插槽取一个名字，而默认插槽就是没有名字的插槽，当父组件的引用的插槽没有定义的名称时，他就会默认显示在子组件的默认插槽位置

 

一、默认插槽基本使用

子组件添加一个默认插槽

 

父组件给默认插槽填充内容

 

运行结果

 

 二、当子组件定义了一个默认插槽，而父组件多处引用时

子组件不变父组件多次且多处引用时

 

运行结果

 

 

 

三、当父组件填充内容指定到默认插槽，而子组件没有定义默认插槽时

子组件去掉默认插槽

 

 父组件定义内容指定到默认插槽

 

运行结果

 

 

 

三、当父组件指定的插槽名称在子组件不存在时，那父组件的内容会填充到默认组件么

父组件指定具名插槽  three

 

子组件定义两个具名插槽 one  two 及一个默认插槽

 

运行结果如下

 

 

 

由此可见当父组件指定的插槽名称在子组件不存在时，父组件的内容不会填充到默认组件

 

四、那当组件所有填充内容都指定到默认插槽，而子组件定义了多个默认插槽时，又会怎么样呢、

首先子组件定义多个默认插槽

 

 

 

父组件所有填充内容指定到默认插槽

 

运行结果

 由此可得当子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将会全部填充到子组件的每个默认插槽中

 

 

 

结论：

1、当子组件只定义了一个默认插槽，而父组件多处引用时，那么会全部显示在该默认插槽

2、当父组件指定的具名插槽在子组件未定义时，父组件填充内容不会填充到任何一个插槽

3、当子组件没有定义默认插槽时，父组件填充的内容指定到默认插槽的话，父组件填充内容不会填充到任何一个插槽

4、当子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将会全部填充到子组件的每个默认插槽中

 

 

 作用域插槽我还没明白，明白以后再来补充