关于Vue的一些小笔记（八）组件插槽slot

前言：这次的笔记主要内容是组件里插槽slot的使用。

一、什么是组件的插槽？（slot）

简单来说，即我们在一个组件模板里定义的东西不是死的，而是可以根据需要来改动的。若我们想要改动那一部分，就需要使用slot来展示不一样的东西。
在这里插入图片描述

就像上面这些图片所示，他们整体可以看作是一个组件，组件里可以分为三个部分。但组件里面有相同的部分，也有不同的部分，而我们就想使用一个组件就可以完成上面三张图所示的那样，故插槽为我们提供了便捷。slot！

二、组件插槽的意义

组件的插槽是为了让我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

如何封装最好呢？

当然是将共性抽取到组件中，将不同暴露为插槽

三、slot插槽的基本语法（使用）

插槽的基本使用：
插槽的默认值 : hhhhh
如果有多个值，同时放入到组件进行替换时，一起作为替换元素

<div id="app">
    <cpn><p>小花加油!奥利给！</p></cpn><!--这里p标签会被放到slot里面-->
    <cpn></cpn> <!--这里会显示默认值的button，没有默认值则为空-->
    <cpn>
        <h2>大喜</h2> <!--这两个(多少个都行)标签都会被放入到slot中-->
        <p>小花</p>
    </cpn>
</div>
<template id= "cpn">
    <div>
        <h2>我爱学习</h2>
        <p>好好学习，天天向上</p>
        <!--定义一个插槽-->
        <slot><button>按钮</button></slot> <!--写在slot里面的为默认值-->
    </div>
</template>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"加油"
        },
        components:{
            cpn:{
                template:"#cpn"
            }
        }
    })
</script>

四、具名插槽的使用

具名插槽就是有具体名称的插槽（给插槽起名）。这样在有很多个插槽时，就可以把想要放的东西放到想要放的插槽里了。

下面是旧的写法：

<div id="app">
    <cpn><p>标题</p></cpn> <!--这里会被放到没有起名的插槽里-->
    <cpn slot="right"><p>标题</p></cpn> <!--这里会被放到名为right的slot里-->
</div>
<template id= "cpn">
    <div>
        <slot name="left"><span>左边</span></slot> <!--起个名-->
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
        <slot></slot>
    </div>
</template>

下面是新的写法：

提供了v-slot指令，写在标签中，没有使用到v-slot的template标签里的内容将会被当成默认插槽的内容。

缩写：v-slot：header 即 #header

<base-layout> <!--这是一个组件-->
  <template v-slot:header>
    <h1>我爱学习</h1>
  </template>

  <template v-slot:default> <!--默认值也可以这样写-->
    <p>小花</p>
    <p>大喜</p>
  </template>

  <template v-slot:footer>
    <p>加油！</p>
  </template>
</base-layout>

五、作用域插槽的使用

编译作用域

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

作用域插槽

<div id="app">
    <!--想让父组件能访问到子组件里的数据
        绑定在<slot>元素上的attribute被称为插槽prop
        在父级作用域中使用带值v-slot来定义我们提供插槽prop的名字
    -->
    <cpn v-slot:default="zhe">{{zhe.user.firstname}}<!--加上刚刚起的名来限定--></cpn>
</div>
<template id="cpn">
    <div>
        <!--为了让user（这是定义在子组件里的数据）在父级的插槽内容中可用
        我们可以将user作为<slot>元素的一个attribute绑定上去-->
        <slot v-bind:user="user">{{user.lastname}}</slot><!--没有v-bind前，只能访问子组件里的数据，动态绑定-->
    </div>
</template>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"好好学习"
        },
        components:{
            cpn:{
                template:"#cpn",
                data(){
                     return{
                        user:{
                        lastname:"大花",
                        firstname:"大喜"
                    }
                }
            }
        }
    })
</script>

总结：

1、在子组件的元素上动态绑定一个要在外面访问的对象属性。

2、在父组件中定义一个名字，通过该名字访问子组件中的对象

更方便的使用方式

直接只用花括号引用子组件中的对象名称

<cpn v-slot:default="{user}">
    {{user.firstname}}
</cpn>