vue插槽使用方法

学前端搞口饭吃

已于 2024-02-01 14:45:04 修改

阅读量962

点赞数 17

文章标签： vue.js javascript 前端

于 2024-02-01 14:44:27 首次发布

本文链接：https://blog.csdn.net/gcyaozuodashen/article/details/135973848

版权

细致讲解slot插槽的使用

彻底搞懂slot插槽，图文详解1、什么是插槽Vue 实现了一套内容分发的 API，将 `` 元素作为承载分发内容的出口。插槽实质是对子组件的扩展，通过``插槽向组件内部指定位置传递内容。slot的出现是为了父组件可以堂而皇之地在子组件中加入内容。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。2、slot 与 props 的区别3、插槽的使用（1）匿名插槽（单个插槽

编辑五花漏 · 2020-11-19 15:39:48 发布

1、什么是插槽

VUE官方文档的解释：

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

个人理解：

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

或者这么说：

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

打个比方：

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

由此可见，萝卜种不种，种什么萝卜由父组件控制；萝卜坑在哪，由子组件控制。换言之 ——

插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是子组件--></em></span>
<<span style="color:#e06c75">div</span> <span style="color:#d19a66">class</span>=<span style="color:#98c379">"child"</span>>
  <<span style="color:#e06c75">h2</span>>Child的标题</<span style="color:#e06c75">h2</span>>
  <<span style="color:#e06c75">slot</span>>我是一个萝卜坑</<span style="color:#e06c75">slot</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件--></em></span>
<<span style="color:#e06c75">div</span> <span style="color:#d19a66">class</span>=<span style="color:#98c379">"father"</span>>
  <<span style="color:#e06c75">h1</span>>Father的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">Child</span>>
    我是个萝卜~
  </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

Father的标题
Child的标题
我是个萝卜~

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

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

2、与 props 的区别

通过props属性，父组件只能向子组件传递属性、方法

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>我是A</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">child</span> <span style="color:#d19a66">:to-child-data</span>=<span style="color:#98c379">"parentData"</span> <span style="color:#d19a66">:to-child-fun</span>=<span style="color:#98c379">"parentFun"</span>></<span style="color:#e06c75">child</span>>
  </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
<span style="color:#c678dd">import</span> child <span style="color:#c678dd">from</span> <span style="color:#98c379">'./B.vue'</span>
<span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
  <span style="color:#d19a66">name</span>:<span style="color:#98c379">'A'</span>,
  <span style="color:#d19a66">components</span>: {
    child
  },
  data () {
    <span style="color:#c678dd">return</span> {
      <span style="color:#d19a66">say</span>: <span style="color:#98c379">''</span>,
      <span style="color:#d19a66">parentData</span>: <span style="color:#98c379">"hello"</span>
    };
  },

  <span style="color:#d19a66">methods</span>: {
    <span style="color:#61aeee">parentFun</span>(val) { <span style="color:#5c6370"><em>//自定义的函数 val是子组件给的参数</em></span>
      <span style="color:#d19a66">this</span>.say = val; <span style="color:#5c6370"><em>//献给data一份问候~</em></span>
      <span style="color:#d19a66">console</span>.<span style="color:#61aeee">log</span>(val,<span style="color:#98c379">" from child"</span>); <span style="color:#5c6370"><em>//看看参数有没有值</em></span>
      <span style="color:#d19a66">console</span>.<span style="color:#61aeee">log</span>(<span style="color:#d19a66">this</span>.say,<span style="color:#98c379">" from parent"</span>); <span style="color:#5c6370"><em>//看看能不能给父组件的data传进去</em></span>
    },
  }
};
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h2</span>>我是B</<span style="color:#e06c75">h2</span>>
    <<span style="color:#e06c75">el-button</span> @<span style="color:#d19a66">click</span>=<span style="color:#98c379">"childClick"</span>>子组件调用父组件的props方法</<span style="color:#e06c75">el-button</span>>
  </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
<span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
  <span style="color:#d19a66">name</span>:<span style="color:#98c379">'B'</span>,
  data () {
    <span style="color:#c678dd">return</span> {
    };
  },
  <span style="color:#d19a66">props</span>: {
    <span style="color:#d19a66">toChildFun</span>: {  
      <span style="color:#d19a66">type</span>: <span style="color:#e6c07b">Function</span>, <span style="color:#5c6370"><em>//参数类型：函数</em></span>
      <span style="color:#d19a66">required</span>: <span style="color:#56b6c2">true</span> <span style="color:#5c6370"><em>//是否必填：是</em></span>
    },
    <span style="color:#d19a66">toChildData</span>: {  
      <span style="color:#d19a66">type</span>: <span style="color:#e6c07b">String</span>, <span style="color:#5c6370"><em>//参数类型：String</em></span>
      <span style="color:#d19a66">default</span>: <span style="color:#98c379">''</span> <span style="color:#5c6370"><em>//默认值</em></span>
    }
  },
  <span style="color:#d19a66">methods</span>: {
    <span style="color:#61aeee">childClick</span>(event)  {
      <span style="color:#d19a66">this</span>.$props.<span style="color:#61aeee">toChildFun</span>(<span style="color:#98c379">'这是来自子组件的问候~~'</span>); <span style="color:#5c6370"><em>//调用Props传来的方法，并送他一个参数~~</em></span>
      <span style="color:#5c6370"><em>// this.toChildFun('这是来自子组件的问候~~'); //跟上面一个效果</em></span>
    }
  }
};
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

在这里插入图片描述

而插槽还可以传递带标签的内容、甚至是组件：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件哦--></em></span>
<<span style="color:#e06c75">div</span> <span style="color:#d19a66">class</span>=<span style="color:#98c379">"father"</span>>
  <<span style="color:#e06c75">h1</span>>Father的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">Child</span>>
  	<span style="color:#d19a66">{{<span style="color:#e06c75">username</span>}}</span>					<span style="color:#5c6370"><em><!-- 参数--></em></span>
    <<span style="color:#e06c75">button</span>>我是一个按钮</<span style="color:#e06c75">button</span>>  <span style="color:#5c6370"><em><!-- 带标签的内容--></em></span>
    <<span style="color:#e06c75">Child2</span>></<span style="color:#e06c75">Child2</span>>             <span style="color:#5c6370"><em><!-- 组件--></em></span>
  </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

3、插槽的使用

（1）匿名插槽（又叫单个插槽、默认插槽）

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">slot</span>>这是个匿名插槽(没有name属性)，这串字符是匿名插槽的默认值。</<span style="color:#e06c75">slot</span>>
</span></span></span></span>

1）可以放置在组件的任意位置。
2）一个组件中只能有一个匿名插槽。
3）匿名插槽只能作为没有slot属性的元素的插槽。

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><div <span style="color:#c678dd">class</span>="<span style="color:#61aeee">child</span>">
    <<span style="color:#61aeee">h1</span>>子组件</<span style="color:#61aeee">h1</span>>
     <<span style="color:#61aeee">slot</span> <span style="color:#61aeee">name</span>="<span style="color:#61aeee">head</span>">头部默认值</<span style="color:#61aeee">slot</span>>
     <<span style="color:#61aeee">slot</span> <span style="color:#61aeee">name</span>="<span style="color:#61aeee">body</span>">主体默认值</<span style="color:#61aeee">slot</span>>
     <<span style="color:#61aeee">slot</span>>这是个匿名插槽(没有<span style="color:#61aeee">name</span>属性)，这串字符是匿名插槽的默认值。</<span style="color:#61aeee">slot</span>>
 </<span style="color:#61aeee">div</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><div <span style="color:#c678dd">class</span>="<span style="color:#61aeee">parent</span>">
 <<span style="color:#61aeee">h1</span>>父组件</<span style="color:#61aeee">h1</span>>
 <<span style="color:#61aeee">child</span>>
     <<span style="color:#61aeee">p</span> <span style="color:#61aeee">slot</span>="<span style="color:#61aeee">body</span>">我是主体</<span style="color:#61aeee">p</span>>
     <<span style="color:#61aeee">p</span>>我是其他内容</<span style="color:#61aeee">p</span>>
     <<span style="color:#61aeee">p</span> <span style="color:#61aeee">slot</span>="<span style="color:#61aeee">footer</span>">我是尾巴</<span style="color:#61aeee">p</span>>
 </<span style="color:#61aeee">child</span>>
 </<span style="color:#61aeee">div</span>>
</span></span></span></span>

运行结果：
父组件
子组件
头部默认值（具名插槽<slot name="head">的默认值被渲染，因为父组件没有为此插槽提供内容）
我是主体（具名插槽<slot name="body">的默认值被覆盖）
我是其他内容（匿名插槽的默认值被覆盖）

注意：

1、<p slot="footer">我是尾巴</p> 插槽被丢弃了，因为子组件中没有<slot name="footer">的插槽与之匹配。
2、如果子组件中的匿名插槽不存在，则<p>我是其他内容</p>也会被丢弃。

这个例子就是想说明两点：

1、坑会一直在，但是没有找到坑的萝卜就会被丢弃！
2、后来者居上，后面的萝卜会覆盖原来坑里的萝卜

（2）具名插槽

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">slot</span> <span style="color:#d19a66">name</span>=<span style="color:#98c379">"body"</span>>这是个具名插槽(有name属性)，这串字符是具名插槽的默认值。</<span style="color:#e06c75">slot</span>>
</span></span></span></span>

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- <base-layout>组件--></em></span>
<<span style="color:#e06c75">div</span> <span style="color:#d19a66">class</span>=<span style="color:#98c379">"container"</span>>
    <<span style="color:#e06c75">header</span>>
        <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">name</span>=<span style="color:#98c379">"header"</span>></<span style="color:#e06c75">slot</span>>
    </<span style="color:#e06c75">header</span>>
    <<span style="color:#e06c75">main</span>>
        <<span style="color:#e06c75">slot</span>></<span style="color:#e06c75">slot</span>> <span style="color:#5c6370"><em><!-- 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。--></em></span>
    </<span style="color:#e06c75">main</span>>
    <<span style="color:#e06c75">footer</span>>
        <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">name</span>=<span style="color:#98c379">"footer"</span>></<span style="color:#e06c75">slot</span>>
    </<span style="color:#e06c75">footer</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

上面的那个例子，是直接把slot直接用在普通标签或者<template>上： <p slot="body">我是主体</p>
出资之外，更推荐在 <template>元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供插槽名称，这样就可以定义插槽的内容了：
<template v-slot:插槽名称>插槽内容</template> 等于 <p slot="插槽名称">插槽内容</p>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">base-layout</span>>
  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:header</span>>
    <<span style="color:#e06c75">h1</span>>我是头header</<span style="color:#e06c75">h1</span>>        <span style="color:#5c6370"><em><!-- <h1 slot="header">我是头header</h1>--></em></span>
  </<span style="color:#e06c75">template</span>>

  <<span style="color:#e06c75">p</span>>我是main的内容111</<span style="color:#e06c75">p</span>>   
  <<span style="color:#e06c75">p</span>>我也是main的内容222</<span style="color:#e06c75">p</span>>

  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:footer</span>>
    <<span style="color:#e06c75">p</span>>我是footer</<span style="color:#e06c75">p</span>>        <span style="color:#5c6370"><em><!-- <p slot="footer">我是footer</p>--></em></span>
  </<span style="color:#e06c75">template</span>>
</<span style="color:#e06c75">base-layout</span>>
</span></span></span></span>

1、带有 v-slot 的<template> 元素中的所有内容都将会被传入相应的插槽。
2、任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

如果你希望更明确一些，可以在一个 <template> 中包裹默认插槽的内容：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">base-layout</span>>
  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:header</span>>
    <<span style="color:#e06c75">h1</span>>我是头header</<span style="color:#e06c75">h1</span>>
  </<span style="color:#e06c75">template</span>>

  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:default</span>> 
    <<span style="color:#e06c75">p</span>>我是main的内容111</<span style="color:#e06c75">p</span>>
    <<span style="color:#e06c75">p</span>>我也是main的内容222</<span style="color:#e06c75">p</span>>
  </<span style="color:#e06c75">template</span>>

  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:footer</span>>
      <<span style="color:#e06c75">p</span>>我是footer</<span style="color:#e06c75">p</span>>
  </<span style="color:#e06c75">template</span>>
</<span style="color:#e06c75">base-layout</span>>
</span></span></span></span>

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

注意：slot 可以用在任何元素上，v-slot 只能添加在 `<template>` 上。只有一种例外情况，请继续往下看。

（3）作用域插槽

上面props的例子，可以看到父组件传给子组件了一个属性和一个方法，子组件可以使用 props 中的属性和方法。那对于插槽来说，父组件想访问子组件的数据，又该怎么做呢？

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是子组件<Child> --></em></span>
<<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是组件Child的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">slot</span>></<span style="color:#e06c75">slot</span>>
  </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
<span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
  <span style="color:#61aeee">data</span>() {
     <span style="color:#c678dd">return</span> {
        <span style="color:#d19a66">childUser</span>: { <span style="color:#e6c07b">Name</span>:<span style="color:#98c379">"Tom"</span>, <span style="color:#e6c07b">Age</span>: <span style="color:#d19a66">23</span> }
    }
}
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件<Father>--></em></span>
<<span style="color:#e06c75">div</span>>
  <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">Child</span>>
    <span style="color:#d19a66">{{<span style="color:#e06c75">childUser.Name</span>}}</span>    
  </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

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

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

只有 <Child> 组件可以访问到 childUser，而我们提供的内容【childUser.Name、childUser.Age】是在父级<Father> 中渲染的。

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

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- <Child> 组件： --></em></span>
<<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是组件Child的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">v-bind:childData</span>=<span style="color:#98c379">"childUser"</span>></<span style="color:#e06c75">slot</span>>
  </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
<span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
  <span style="color:#61aeee">data</span>() {
     <span style="color:#c678dd">return</span> {
        <span style="color:#d19a66">childUser</span>: { <span style="color:#e6c07b">Name</span>:<span style="color:#98c379">"Tom"</span>, <span style="color:#e6c07b">Age</span>:<span style="color:#d19a66">23</span> }
    }
}
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

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

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件<Father>--></em></span>
<<span style="color:#e06c75">div</span>>
  <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">Child</span>>
    <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:default</span>=<span style="color:#98c379">"slotProps"</span>>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Name</span>}}</span>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Age</span>}}</span>
    </<span style="color:#e06c75">template</span>>
  </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

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

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件哦--></em></span>
<<span style="color:#e06c75">div</span>>
  <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">Child</span> <span style="color:#d19a66">v-slot:default</span>=<span style="color:#98c379">"slotProps"</span>>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Name</span>}}</span>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Age</span>}}</span>
  </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

还可以省略default。就像未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件哦--></em></span>
<<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">Child</span> <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"slotProps"</span>>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Name</span> }}</span>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Age</span>}}</span>
    </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 无效，会导致警告 --></em></span>
<<span style="color:#e06c75">Child</span>  <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"slotProps"</span>>
  <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Name</span> }}</span>
  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:other</span>=<span style="color:#98c379">"otherSlotProps"</span>>
    slotProps is NOT available here
  </<span style="color:#e06c75">template</span>>
</Child >
</span></span></span></span>

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

也就是说，但只要出现多个插槽，所有的插槽名都得写全了，不能省略。

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是子组件Child --></em></span>
<<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是组件Child的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">v-bind:childData</span>=<span style="color:#98c379">"childUser"</span>></<span style="color:#e06c75">slot</span>>       <span style="color:#5c6370"><em><!--匿名插槽--></em></span>
    <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">name</span>=<span style="color:#98c379">"other"</span> <span style="color:#d19a66">v-bind:otherChildData</span>=<span style="color:#98c379">"otherChildUser"</span>></<span style="color:#e06c75">slot</span>>  <span style="color:#5c6370"><em><!--具名插槽--></em></span>
  </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
<span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
  <span style="color:#61aeee">data</span>() {
     <span style="color:#c678dd">return</span>{
        <span style="color:#d19a66">childUser</span>: {<span style="color:#e6c07b">Name</span>:<span style="color:#98c379">"Tom"</span>,<span style="color:#e6c07b">Age</span>:<span style="color:#d19a66">23</span>},
        <span style="color:#d19a66">otherChildUser</span>:{<span style="color:#e6c07b">Name</span>:<span style="color:#98c379">"Mike"</span>,<span style="color:#e6c07b">Age</span>:<span style="color:#d19a66">25</span>}
    }
}
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件Father--></em></span>
<<span style="color:#e06c75">Child</span> >
  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:default</span>=<span style="color:#98c379">"slotProps"</span>>   <span style="color:#5c6370"><em><!-- default不能省略！--></em></span>
    <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.childData.Name</span> }}</span>
  </<span style="color:#e06c75">template</span>>

  <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:other</span>=<span style="color:#98c379">"otherSlotProps"</span>>
    <span style="color:#d19a66">{{<span style="color:#e06c75">otherSlotProps.otherChildData.Name</span>}}</span>
  </<span style="color:#e06c75">template</span>>
</<span style="color:#e06c75">Child</span>>
</span></span></span></span>

上面`v-bind:childData="childUser"`，是将 childUser 作为 `<slot>` 元素的一个属性绑定上去，感觉起的名太多了，有点眼花缭乱了，还能再简洁一点：

v-bind: 后面的参数是可以省略的：

在这里插入图片描述

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是子组件Son--></em></span>
<<span style="color:#e06c75">div</span>>
  <<span style="color:#e06c75">h1</span>>hey，我是组件Son的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">v-bind</span>=<span style="color:#98c379">"childUser"</span>></<span style="color:#e06c75">slot</span>>  <span style="color:#5c6370"><em><!--v-bind后面的参数省略--></em></span>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件Father--></em></span>
<<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">Son</span>>
      <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:default</span>=<span style="color:#98c379">"user"</span>>   <span style="color:#5c6370"><em><!--user是自定义的--></em></span>
        <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Name</span>}}</span>,
        <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Age</span>}}</span>
      </<span style="color:#e06c75">template</span>>
    </<span style="color:#e06c75">Son</span>>
  </<span style="color:#e06c75">div</span>>
</span></span></span></span>

还可以省略的defalut：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件Father--></em></span>
<<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">Son</span>>
      <<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"user"</span>>   <span style="color:#5c6370"><em><!--省略default--></em></span>
        <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Name</span>}}</span>,
        <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Age</span>}}</span>
      </<span style="color:#e06c75">template</span>>
    </<span style="color:#e06c75">Son</span>>
  </<span style="color:#e06c75">div</span>>
</span></span></span></span>

（4）解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里，

所以，这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。这样就很灵活。

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- <Child> 组件： --></em></span>
<<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是组件Child的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">v-bind</span>=<span style="color:#98c379">"childUser"</span>></<span style="color:#e06c75">slot</span>>  <span style="color:#5c6370"><em><!--v-bind后面的参数省略了--></em></span>
  </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
<span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
  <span style="color:#61aeee">data</span>() {
     <span style="color:#c678dd">return</span> {
        <span style="color:#d19a66">childUser</span>: { <span style="color:#e6c07b">Name</span>:<span style="color:#98c379">"Tom"</span>, <span style="color:#e6c07b">Age</span>:<span style="color:#d19a66">23</span> }
    }
}
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- <Father> 组件： --></em></span>
<<span style="color:#e06c75">Child</span>  <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"{user}"</span>>
  <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Name</span> }}</span>
</<span style="color:#e06c75">Child</span>>
</span></span></span></span>

结构插槽在 el-table的中的应用：
在这里插入图片描述

还可以将 user重命名为 person：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- <Father> 组件： --></em></span>
<<span style="color:#e06c75">Child</span> <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"{ user: person }"</span>>
  <span style="color:#d19a66">{{ <span style="color:#e06c75">person.Name</span> }}</span>
</Child  >
</span></span></span></span>

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- <Father> 组件： --></em></span>
<<span style="color:#e06c75">Child</span> <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"{ user= { Name: 'Guest' } }"</span>>
  <span style="color:#d19a66">{{ <span style="color:#e06c75">childData.Name</span> }}</span>
</Child >
</span></span></span></span>

对象的解构赋值看不明呗的请移步 ====>> 变量的解构赋值—ES6入门，第六节。

4、v-slot 、 slot 、 slot-scope

（1） `slot` 和 `slot-scope` 已经被废弃

（2）所有的 2.x 版本中， `slot` 和 `slot-scope` 属性仍会被支持

（3） Vue 3 不支持 `slot` 和 `slot-scope`，所以更推荐使用 `v-slot`

其实，v-slot就是把 slot 和 slot-scope 的功能整合了一下，把两个人的活都干了

<template v-slot:插槽名称=插槽数据>插槽内容</ template>

< p slot=插槽名称 slot-scope=插槽数据>插槽内容</ p>

v-slot 的使用

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

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">template</span> <span style="color:#d19a66">v-slot:header</span>>
    <<span style="color:#e06c75">h1</span>>Here might be a page title</<span style="color:#e06c75">h1</span>>
 </<span style="color:#e06c75">template</span>>
</span></span></span></span>

2、只有 当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。 这样我们就可以把 v-slot 直接用在组件标签上。除此之外，v-slot 必须用在 <template>元素上。

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><span style="color:#5c6370"><em><!-- 这是父组件哦--></em></span>
<<span style="color:#e06c75">div</span>>
  <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
  <<span style="color:#e06c75">Child</span> <span style="color:#d19a66">v-slot:default</span>=<span style="color:#98c379">"slotProps"</span>>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.Name</span>}}</span>
      <span style="color:#d19a66">{{ <span style="color:#e06c75">slotProps.Age</span>}}</span>
  </<span style="color:#e06c75">Child</span>>
</<span style="color:#e06c75">div</span>>
</span></span></span></span>

3、跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把 v-slot: 替换为字符 #。
例如 v-slot:header 可以被重写为 #header，和其它指令一样，该缩写只在其有参数的时候才可用。

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">template</span> #<span style="color:#d19a66">header</span>>
    <<span style="color:#e06c75">h1</span>>Here might be a page title</<span style="color:#e06c75">h1</span>>  
 </<span style="color:#e06c75">template</span>>
</span></span></span></span>

也就是说，如果你希望使用缩写的话，#后面必须写插槽名，default不可以省略：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">Child</span>  #<span style="color:#d19a66">default</span>=<span style="color:#98c379">"{user}"</span>>
  <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Name</span> }}</span>
</Child >
</span></span></span></span>

再来复习一下省略default：

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">Child</span> <span style="color:#d19a66">v-slot</span>=<span style="color:#98c379">"{user}"</span>>
  <span style="color:#d19a66">{{ <span style="color:#e06c75">user.Name</span> }}</span>
</Child >
</span></span></span></span>

slot 、 slot-scope 的使用

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">template</span>>
  <<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>这里是子组件</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">slot</span> <span style="color:#d19a66">name</span>=<span style="color:#98c379">"mySlot"</span> <span style="color:#d19a66">v-bind</span>=<span style="color:#98c379">"childUser"</span>> </<span style="color:#e06c75">slot</span>>
 </<span style="color:#e06c75">div</span>>
</<span style="color:#e06c75">template</span>>
<<span style="color:#e06c75">script</span>>
  <span style="color:#c678dd">export</span> <span style="color:#c678dd">default</span> {
    <span style="color:#d19a66">name</span>: <span style="color:#98c379">'Son'</span>,
    <span style="color:#61aeee">data</span>() {
      <span style="color:#c678dd">return</span> {
        <span style="color:#d19a66">childUser</span>: { <span style="color:#e6c07b">Name</span>: <span style="color:#98c379">"Tom"</span>, <span style="color:#e6c07b">Age</span>: <span style="color:#d19a66">23</span> }
      }
    }
  }
</<span style="color:#e06c75">script</span>>
</span></span></span></span>

<span style="color:#1c1c28"><span style="color:#555770"><span style="background-color:#282c34"><span style="color:#abb2bf"><<span style="color:#e06c75">div</span>>
    <<span style="color:#e06c75">h1</span>>hey，我是父组件Father的标题</<span style="color:#e06c75">h1</span>>
    <<span style="color:#e06c75">Son</span>>
      <<span style="color:#e06c75">div</span> <span style="color:#d19a66">slot</span>=<span style="color:#98c379">"mySlot"</span> <span style="color:#d19a66">slot-scope</span>=<span style="color:#98c379">"data"</span>>
          <span style="color:#d19a66">{{ <span style="color:#e06c75">data.Name</span> }}</span>
          <span style="color:#d19a66">{{ <span style="color:#e06c75">data.Age</span> }}</span>
      </<span style="color:#e06c75">div</span>>
    </<span style="color:#e06c75">Son</span>>
  </<span style="color:#e06c75">div</span>>
</span></span></span></span>

1、 slot=“default” 可以省略不写，slot可以用在 <template>元素，也可以用在任意的普通元素上。

2、这里的 slot-scope 声明了被接收的 prop 对象会作为 slotProps 变量存在于 <template> 作用域中。你可以像命名 JavaScript函数参数一样随意命名 slotProps。同样的，slot-scope可以用在 template元素，也可以用在任意的普通元素上。

细致讲解slot插槽的使用_五花漏-ViewDesign