Vue插槽

1. 什么是插槽

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

2. 插槽基本用法

• 如果没有在组件内部声明插槽区域，则组件标签内的内容默认不显示

App.vue

<Left>
    <p>这是在 Left 组件声明的p标签</p>
</Left>

Left.vue

<div class="left-box">
    <span>Left 组件</span>
    <!-- 在 Left 组件内声明一个插槽区 -->
    <slot></slot>
</div>

3. v-slot: 将内容放在指定插槽

• vue 官方规定：每一个 slot 插槽都要有一个 name 名称
• 如果省略了 slot 的name 则有一个默认名称 default
• 默认情况下，使用组件时提供的内容会被填充到 name 为 default 的插槽内

将内容放在指定的插槽内：

• 使用 v-slot:xxx 其中 xxx为插槽 name 值，只能放在 <template> 标签内

• 使用 <template> 标签包裹

• <template> 是一个虚拟标签，只起到包裹性质的作用，不会被渲染为实质性的 html 元素

• v-slot:xxx 可以简写为 #xxx

<Left>
    <template v-slot:mySlot>
        <p>这是在 Left 组件声明的p标签</p>
    </template>
</Left>

<slot name="mySlot"></slot>

4. 插槽后背（默认）内容

• 当使用组件指定了插槽内容时，优先显示指定的内容
• 当没有指定内容时，渲染 slot 标签内的默认内容

<slot name="mySlot">mySlot 默认内容</slot>

5. 具名插槽

App.vue

<Article>
    <template v-slot:title>
        <h3>一首诗</h3>
    </template>
    <template #content>
        <div>
            <p>哈哈哈</p>
            <p>哈哈哈</p>
            <p>哈哈哈</p>
        </div>
    </template>
    <template #footer>
        <p>娉婷</p>
    </template>
</Article>

Article.vue

div class="article-container">
        <div class="header-box">
            <slot name="title"></slot>
        </div>
        <div class="content-box">
            <slot name="content"></slot>
        </div>
        <div class="footer-box">
            <slot name="footer"></slot>
        </div>
    </div>

6. 作用域插槽

• 在封装组件时，为预留的 <slot> 提供属性对应的值，叫做作用域插槽

• 这些属性对应的值可以在父组件中访问到，默认为空对象

• 子组件：

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

• 父组件

  obj 是形参

  <template #content="obj">
      <div>
          <p>{{obj}}</p> <!-- {"msg":"hello vue.js"} -->
          <p>{{obj.msg}}</p><!-- hello vue.js -->
      </div>
  </template>
  

  • 动态绑定

    data(){
        return{
            userInfo:{
                name: 'pingting',
                age: 12
            }
        }
    }
    

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

    父组件可以通过解构获得需要的值

    <template #content="{msg:message , user: user}">
        <div>
            <p>{{message}}</p>
            <p>{{user.name}}</p>
            <p>{{user.age}}</p>
        </div>
    </template>