vue的v-solt总结，老是忘，非常详细，每个都有全部代码

偏执的太偏执、 2023-07-20 08:22 103阅读 0赞

# 参考 #

[官网文档][Link 1]

# 具名插槽 #

`vue 2.6+废弃`  
在Test.vue中使用BaseLayout 组件，在向具名插槽提供内容的时候，我们可以在一个父组件的 元素上使用 slot 特性

<template>
      <div class="test">
        <base-layout>
          <template slot="header">
            <h1>header</h1>
          </template>
    
          <p>main1</p>
          <p>main2</p>
    
          <template slot="footer">
            <h1>footer</h1>
          </template>
        </base-layout>
      </div>
    </template>
    <script> import BaseLayout from "./BaseLayout"; export default { name: "", components: { BaseLayout }, data() { return { }; }, methods: { }, mounted() { } }; </script>
    <style lang="less" scoped></style>

或者直接用在一个普通的元素上：Test.vue内容

<template>
      <div class="test">
        <base-layout>
          <h1 slot="header">header</h1>
          <p>main1</p>
          <p>main2</p>
    
          <template slot="footer">
            <h1>footer</h1>
          </template>
        </base-layout>
      </div>
    </template>
    <script> import BaseLayout from "./BaseLayout"; export default { name: "", components: { BaseLayout }, data() { return { }; }, methods: { }, mounted() { } }; </script>
    <style lang="less" scoped></style>

BaseLayout .vue组件

<template>
      
      <div class="container">
        <header>
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    </template>
    <script> export default { name: "", components: { }, data() { return { }; }, methods: { }, mounted() { } }; </script>
    <style lang="less" scoped></style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]  
访问Test.vue页面内容如下  
![在这里插入图片描述][20200331213001937.png]

我们可以使用 v-slot 指令改写上面的Test.vue

<template>
      <div class="test">
        <base-layout>
          
          <p>main1</p>
          <p>main2</p>
    
          <template v-slot:footer>
            <h1>footer</h1>
          </template>
        </base-layout>
      </div>
    </template>
    <script> import BaseLayout from "./BaseLayout"; export default { name: "", components: { BaseLayout }, data() { return { }; }, methods: { }, mounted() { } }; </script>
    <style lang="less" scoped></style>

**注意：`<h1 v-slot:header>header</h1>`这种写法是错误的，`v-solt`只能用在template上面**

插槽的名字现在通过 `v-slot:slotName` 这种形式来使用

`Tips: 没有名字的 <slot> 隐含有一个 "default" 名称`  
例如，上面的默认插槽，如果你想显示调用的话，可以这样：

<template>
      <div class="test">
        <base-layout>
          <template v-slot:header>
            <h1>header</h1>
          </template>
          <template v-slot:default>
            <p>main1</p>
            <p>main2</p>
          </template>
    
          <template v-slot:footer>
            <h1>footer</h1>
          </template>
        </base-layout>
      </div>
    </template>
    <script> import BaseLayout from "./BaseLayout"; export default { name: "", components: { BaseLayout }, data() { return { }; }, methods: { }, mounted() { } }; </script>
    <style lang="less" scoped></style>

**总结：父组件中具名插槽`slot="header"`内容会进入子组件对应的名字中`<slot name="header"></slot>`**

# 作用域插槽 #

**父组件中访问子组件的插槽绑定的值**

父组件 Test.vue中

<template>
      <div id="app">
        
        <user v-slot:default="slotProps">
          
          {
       { slotProps.user.firstName }}
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

子组件User.vue中

<template>
      <div>
        
        <slot :user="user">
          
          {
       { user.lastName }}
        </slot>
      </div>
    </template>
    <script> export default { data() { return { user: { firstName: "张", lastName: "三" } }; } }; </script>
    <style></style>

结果：  
![在这里插入图片描述][20200331225403109.png]

在这个栗子中，我们选择 `slotProp`作为我们的`slot props`名字，但你可以使用你喜欢的任何名字。

*  父组件 Test.vue还可以这么写,将`v-slot:default="slotProps"`改为`v-slot="slotProps"`上面

<template>
      <div id="app">
        
        <user v-slot="slotProps">
          
          {
       { slotProps.user.firstName }}
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

*  父组件 Test.vue还可以这么写,将`v-solt`写在`template`上面

<template>
      <div id="app">
        
        <user>
          <template v-slot:default="slotProps">
            
            {
       { slotProps.user.firstName }}
          </template>
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

*  父组件 Test.vue还可以这么写，`v-slot:default="slotProps"`改为`v-slot="slotProps"`

<template>
      <div id="app">
        
        <user>
          <template v-slot="slotProps">
            
            {
       { slotProps.user.firstName }}
          </template>
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

# 单个默认插槽的缩写形式 #

总结上面的作用域插槽。在上述情况下，当且仅当提供了默认插槽内容时，我们可以使用 `v-slot` 直接作用在组件上：

<current-user v-slot:default="slotProps">
      {
       { slotProps.user.firstName }}
    </current-user>

我们可以简化上面的的默认插槽写法：

<current-user v-slot="slotProps">
      {
       { slotProps.user.firstName }}
    </current-user>

**请注意了，默认插槽的缩写语法不能与具名插槽混用：**

<current-user v-slot="slotProps">
      {
       { slotProps.user.firstName }}
      <template v-slot:other="otherSlotProps">
        slotProps is NOT available here
      </template>
    </current-user>

于是，上面的代码，我们改写成：

<current-user>
     
      
      <template v-slot:default="slotProps">
        {
       { slotProps.user.firstName }}
      </template>
    
      <template v-slot:other="otherSlotProps">
        ...
      </template>
    </current-user>

# 插槽内容的解构赋值 #

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
      // 插槽内容
    }

这意味着 `v-slot` 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 `prop`

父组件Test.vue

<template>
      <div id="app">
        
        <user v-slot="{ user }">
          
          {
       { user }}
          <br />
          {
       { user.firstName }}
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

这时候访问Test.vue显示的内容为  
![在这里插入图片描述][20200331231824217.png]

子组件 User.vue

\*\*父组件Test.vue`<user v-slot="{ user }">`里面的user必须和子组件User.vue中`<slot :user="user">`的`:user`\*\*保持一致，例如  
Test.vue

<template>
      <div id="app">
        
        <user v-slot="{ person }">
          
          {
       { person }}
          <br />
          {
       { person.firstName }}
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

User.vue

<template>
      <div>
        
        <slot :person="user">
          
          {
       { user.lastName }}
        </slot>
      </div>
    </template>
    <script> export default { data() { return { user: { firstName: "张", lastName: "三" } }; } }; </script>
    <style></style>

结果  
![在这里插入图片描述][20200331232625387.png]

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

Test.vue

<template>
      <div id="app">
        
        <user v-slot="{ person: people }">
          
          {
       { people }}
          <br />
          {
       { people.firstName }}
        </user>
      </div>
    </template>
    
    <script> import User from "./User.vue"; export default { name: "app", components: { User } }; </script>
    
    <style></style>

User.vue

结果![在这里插入图片描述][20200331232925882.png]

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

# 命名插槽简写 #

这个简单一些，就不去写实例了

`2.6.0+ 新增`  
与 `v-on`和 `v-bind`类似，`v-slot` 也有一个简写，即使用 `#`代替 `v-slot`。例如， `v-slot:header` 简写成 `#header`:

<base-layout>
      <template #header>
        <h1>Here might be a page title</h1>
      </template>
    
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    
      <template #footer>
        <p>Here's some contact info</p>
      </template>
    </base-layout>

和其他指令一样，只有在提供参数时才能使用简写形式，下面的写法是无效的：

<current-user #="{ user }">
      {
       { user.firstName }}
    </current-user>

也就是说，如果你想使用简写语法，则务必指定插值的名字：

<current-user #default="{ user }">
      {
       { user.firstName }}
    </current-user>

[Link 1]: https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20230528/891d51be52b4409da66d2e2392bca920.png
[20200331213001937.png]: /images/20230528/4e30c195b52743d0b9bc0d8305261fa2.png
[20200331225403109.png]: /images/20230528/8addf558920746be83d6ecfa7d069faa.png
[20200331231824217.png]: /images/20230528/9f1ddb76656447d497d709d6950df32f.png
[20200331232625387.png]: /images/20230528/055a35d7b44a4c01adad2612540d99ed.png
[20200331232925882.png]: /images/20230528/d3e86de85fa34ce8bb670c0a6f985007.png