vue.js slot的使用详解

1、普通用法

使用标签,可以将父组件放在子组件内的内容，显示在想让他显示的地方。例：
子组件children:

  // slot的位置就是父组件中的123456

父组件：

123456

那么会得到:

123456

children子组件里的slot中可以有自己的内容，

123456 

我们可以把他理解成默认值，如果父组件传入相应的内容，那么最终显示的就是父组件传入的内容，如果父组件中不传入内容，那么最终显示的就是子组件slot中的内容

2、具名slot

多个slot标签可以使用

name属性来进行标识，在使用的时候就可以通过来给对应的slot进行分发。

这样在子组件中对应的名字为 "mySlot1" 的slot位置的内容就是

哈哈哈哈

,而在没有指定名字的slot的位置会出现

呵呵呵呵

，(

这种写法已经被废弃。)
tips: 具名插槽可以缩写成 ,slotName为slot的名字

3、作用域插槽。

在理解作用域插槽之前，我们必须要先知道编译作用域，简单来说，就是在父级模板中的内容都是在父级作用域中编译的，在子模板中的所有内容都是在子作用域中编译的。还是拿上面的children组件和父组件来说。
子组件children:

    {{user.name}}   // 这里的user就是子组件里面user

父组件调用children:

    {{user.name}}  // 这里的user就是父组件中的user

如果想在父组件中使用插槽的时候使用子组件中的user，就需要用到作用域插槽。作用域插槽需要在子组件中给slot元素绑定一个特性。
children组件:

这个特性被称为插槽prop。这样在父组件中，就可以使用这个user了,如代码，在slotProp中，就可以访问到子组件中的user;
父组件:

4、动态插槽名：

2.6.0新增了动态指令参数,插槽也可以使用动态指令参数来定义动态的插槽名。