slot在服务器哪个位置,彻底搞懂slot插槽，图文详解

1、什么是插槽

VUE官方文档的解释：

Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。

个人理解：

插槽实质是对子组件的扩展，通过插槽向组件内部指定位置传递内容。

或者这么说：

slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。

打个比方：

有句话叫一个萝卜一个坑。父组件想要在子组件中种萝卜，需要在子组件中挖个坑，就是一个【萝卜坑】。父组件想要给子组件添加的内容就是【萝卜】。

由此可见，萝卜种不种，种什么萝卜由父组件控制；萝卜坑在哪，由子组件控制。 换言之，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

举个栗子，在一个Father 父组件内部使用一个名为 Child 的子组件，向子组件的内部的“指定位置”传递一些内容，你可以这么写：

Child的标题

我是一个萝卜坑

Father的标题

我是个萝卜~

看一下运行效果：

Father的标题

Child的标题

我是个萝卜~

看到没，是不是就像父组件的萝卜种到了子组件的坑里？

看到这里不禁发出灵魂一问：这不是父组件给子组件传了个值吗？那和props有啥区别？

2、slot 与 props 的区别：通过props属性，父组件可以向子组件传递属性、方法，可是父组件不能通过属性传递带标签的内容、甚至是组件，而插槽可以。

就像这样

Father的标题

我是一个按钮

3、插槽的使用

(1)匿名插槽(单个插槽、默认插槽)

匿名插槽就是没有设置name属性的插槽。

可以放置在组件的任意位置。

一个组件中只能有一个该类插槽。

作为找不到匹配的内容片段时的备用插槽。

匿名插槽只能作为没有slot属性的元素的插槽。

子组件

头部默认值

主体默认值

这是个匿名插槽(没有name属性)，这串字符是匿名插槽的默认值。

父组件

我是主体

我是其他内容

我是尾巴

运行效果：

父组件

子组件

头部默认值 (head的默认值被渲染：默认值只会在没有提供内容的时候被渲染。)

我是主体 (body的默认值被覆盖)

我是其他内容 (名插槽的默认值被覆盖)

我是尾巴

—— 被丢弃了，因为子组件中没有name="footer"的插槽与之匹配。

如果子组件中的匿名插槽不存在，则

我是其他内容

也会被丢弃。

(2)具名插槽

意思就是具有名字的插槽，名字通过属性name来定义。

一个组件中可以有很多具名插槽，出现在不同的位置。

我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供插槽名称：

我是头header

我是main的内容111

我也是main的内容222

我是footer

任何没有被包裹在带有 v-slot 的 template 中的内容都会被视为默认插槽的内容。

一个不带 name 的 slot 插槽会带有隐含的名字 default 。如果你希望更明确一些，可以在一个 中包裹默认插槽的内容：

我是头header

我是main的内容111

我也是main的内容222

我是footer

两种写法的渲染效果是一样的：

我是头header

我是main的内容111

我也是main的内容222

我是footer

注意 v-slot 只能添加在 上 (只有一种例外情况)

(3)作用域插槽

hey，我是组件Child的标题

export default {

data() {

return{

childUser:{Name:"Tom",Age:23}

}

}

当使用Child组件时，想访问Child中的数据childUser并且将其展示在插槽的位置：

hey，我是父组件Father的标题

{{childUser.Name}}，

{{childUser.Age}}

然而上述代码不会正常工作

因为父级模板里的所有内容都是在父级作用域中编译的；子级模板里的所有内容都是在子作用域中编译的。

只有 组件可以访问到 childUser，而我们提供的内容【{{childUser.Name}}， {{childUser.Age}}】是在父级渲染的。

为了让 childUser 在父级的插槽内容中可用，需要把 childUser 从 子级作用域传递到 父级作用域。

做法就是将 childUser 作为 元素的一个属性绑定上去：

hey，我是组件Child的标题

export default {

data() {

return{

childUser:{Name:"Tom",Age:23}

}

}

绑定在 元素上的 属性childData被称为插槽 prop。

现在在父级作用域中，我们可以使用带值的 v-slot 来定义 插槽 prop 的名字：

hey，我是父组件Father的标题

{{ slotProps.childData.Name}}

{{ slotProps.childData.Age}}

在这个例子中，我们将包含 [ 所有插槽 prop 的对象 ] 命名为 slotProps，也可以自定义。

因为在上述情况下，被提供的内容只有默认插槽，组件的标签可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

hey，我是父组件Father的标题

{{ slotProps.childData.Name}}

{{ slotProps.childData.Age}}

这种写法还可以更简单。就像未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

hey，我是父组件Father的标题

{{ slotProps.childData.Name }}

{{ slotProps.childData.Age}}

但是默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

{{ slotProps.childData.Name }}

slotProps is NOT available here

只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：

{{ slotProps.childData.Name }}

...

4、解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里，所以，这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。

{{ childData.Name }}

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 childData重命名为 person：

{{ person.Name }}

你甚至可以定义默认内容，用于插槽 prop 是 undefined 的情形：

{{ childData.Name }}

3、v-slot、slot、slot-scope

slot、slot-scope已经被废弃。推荐使用vue2.6.0中的v-slot。

· slot 的使用(匿名插槽&具名插槽)

子组件

具名插槽的默认内容。

这是个匿名插槽(没有name属性)，这串字符是匿名插槽的默认值。

父组件

我是主体

我是其他内容

运行效果：

父组件

子组件

我是主体

我是其他内容

· v-slot 的使用

v-slot指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 的 API 替代方案。

在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

匿名插槽&具名插槽&作用域插槽看上面的例子

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把 v-slot: 替换为字符 #。

例如 v-slot:header 可以被重写为 #header，和其它指令一样，该缩写只在其有参数的时候才可用。

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之，default不可以省略：

{{ childData.Name }}

· slot-scope的使用

这里是child 组件

//作用域插槽的用法(slot-scope)

{{ childData.msg }}