8. Vue插槽的使用

目录

一、什么是插槽

二、插槽的基本使用

三、具名插槽

四、作用域插槽

---

一、什么是插槽

Vue插槽（slot）：是Vue为组件的封装者提供的能力。允许开发者在封装组件的时候，把不确定的、希望由用户指定的部分定义为插槽

---

二、插槽的基本使用

vue官方规定：

1. 每一个插槽都有一个默认的name名称，如果省略了slot的name属性，则默认名称叫做default

2. 如果用户没有指定内容，则可以显示插槽里面的默认内容，vue官方叫做后备内容

看下方代码：

<template>

  <div class="left-container">

    <h3>Left 组件</h3>

    <!-- 声明一个插槽 -->

    <!-- vue官方规定，每一个插槽都有一个默认的name 名称

    如果省略了slot的name属性，则默认名称叫做default

    同时如果用户没有指定内容，则可以显示插槽里的默认内容，vue官方叫做后备内容 -->

    <slot name="default">这里面是插槽的默认内容</slot>

  </div>

</template>

默认情况下在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中

1.如果要把内容填充到指定名称的插槽中，需要使用v-slot: 这个指令

2. v-slot: 后面要跟上插槽的名字

3. v-slot: 指令不能直接用在元素身上，必须使用在template 标签上

4. template标签，是一个虚拟的标签，只起到了包裹的作用，不会被渲染为任何实质性的html元素

5. v-slot: 简写是 # -->

看下方代码：

<template>

  <div class="app-container">

    <h1>App 根组件</h1>

    <hr />

    <div class="box">

      <!-- 渲染 Left 组件和 Right 组件 -->

      <left>

        <!-- 默认情况下在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中 -->

        <!-- 1.如果要把内容填充到指定名称的插槽中，需要使用v-slot: 这个指令

        2. v-slot: 后面要跟上插槽的名字

        3. v-slot: 指令不能直接用在元素身上，必须使用在template 标签上

        4. template标签，是一个虚拟的标签，只起到了包裹的作用，不会被渲染为任何实质性的html元素

        5. v-slot: 简写是 # -->

        <template v-slot:default>

          <p>这是在Left组件的内容区域，声明的p标签</p>

        </template>

      </left>

    </div>

  </div>

</template>

---

三、具名插槽

简单来说就是带名字的插槽就叫做具名插槽

<template>

    <div class="artical-container">

        <!-- 文章标题 -->

        <div class="header-box">

// 放置一个插槽，名字叫做 title

            <slot name="title"></slot>

        </div>

        <!-- 文章内容 -->

        <div class="content-box">

// 放置一个插槽，名字叫做 content

            <slot name="content"></slot>

        </div>

        <!-- 文章作者 -->

        <div class="footer-box">

// 放置一个插槽，名字叫做 autor

            <slot name="autor"></slot>

        </div>

    </div>

</template>

<Artical>

      <template #title>

        <h2>静夜思</h2>

      </template>

      <template #content>

        <p>床前明月光</p>

        <p>疑是地上霜</p>

        <p>举头望明月</p>

        <p>低头思故乡</p>

      </template>

      <template #autor>

        <div>

          作者：李白

        </div>

      </template>

    </Artical>

---

四、作用域插槽

作用域插槽的定义：在封装组件的时候，为预留slot 插槽提供属性对应的值，这种用法叫做：作用域插槽

看下方代码：

export default {

    data() {

        return {

            info: {

                username: 'liupeng',

                age: 19

            }

        }

    }

}

<slot name="content" msg="hello vue.js" :user="info"></slot>

使用形参来接收 作用域插槽传递的值，默认是一个空对象

scope 接收过来的是一个对象，可以通过解构赋值，来拿到自己想要的数据-->

 <template #content="{ msg, user}">

        <p>床前明月光</p>

        <p>疑是地上霜</p>

        <p>举头望明月</p>

        <p>低头思故乡</p>

        <p>{{ user.username }}</p>

        <p>{{ msg }}</p>

</template>