slot插槽的简单理解

slot概念

是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。

自己理解为一个占位符，当需要用时可以定义一个slot，不需要用时slot，页面上也不会有痕迹。

插槽显不显示是由父盒子决定的，插槽在哪个位置上显示是由子组件决定的。

插槽可以分为三种：匿名插槽|具名插槽|作用域插槽

匿名插槽

slot没有设置name属性这种插槽在一个组件中一般只有一个

子组件

<template>
  <div>
    <div>这里是插槽上面</div>
    <slot></slot>
    <div>这里是插槽的下面<div>
  </div>
</template>

父组件

<template>
<div>
  <!--调用子组件  -->
  <myscope>asd</myscope>
</div>
</template>

<script>
import myscope from './myscope.vue'  //导入
export default {
  components:{
    myscope    //注册组件
  }
}
</script>

这个时候，在调用子组件的地方，如果我们写了内容如：asd，(写什么都可以)

没写内容的也不影响显示，就没了内容而言

具名插槽

具名插槽理论上可以有无数个，可以根据实际su'y

子组件，就是给slot标签添加上   name:名字(什么都可以)

父组件，在父组件调用子组件的地方里面添加<template></template>并加上对应的slot名字，就可以使对应的内容显示在对应的子组件具名插槽中

父组件

<template>
  <div>
    <!-- 在使用子组件的时候，在组件之间的内容默认会覆盖匿名插槽 -->
    <hmnav>
      <template #left>   <!-- 简写   v-slot:可以简写为# -->
        后退
      </template>
      我的导航栏
      <template v-slot:right>   <!-- 常规写法 -->
        按钮
      </template>
    </hmnav>
  </div>
</template>

子组件

<template>
  <div class="nav">
    <!-- 匿名插槽：slot没有设置name属性
    这种插槽在一个组件中一般只有一个 -->
    <div class="left">                <!-- 具名插槽 -->
      <slot name='left'></slot>
    </div>
    <div class="center">
      <!-- 内容占位                    这个就是匿名插槽-->
      <slot>添加默认值</slot>
    </div>
    <div class="right">               <!-- 具名插槽 -->
      <slot name='right'></slot>
    </div>
  </div>
</template>

作用域插槽

作用域插槽相比前两个要复杂一点

使用作用域插槽 1.使用子组件 2.通过v-slot接收子组件所传递的数据

作用域插槽和具名插槽的区别是什么？

简单说就是作用域插槽可以添加数据

父组件

    <myscope v-slot="scope">            <!-- 这里是正常写法 -->
      <p>{{ scope }}</p>
      <p>123</p>
    </myscope>
    <myscope>
      <template v-slot:myslot="scope">    <!-- 这个是具名和作用域插槽一起使用 -->
        <p>{{ scope }}</p>
        <p>456</p>
      </template>
    </myscope>
    <myscope>
      <template #myslot="scope">        <!--这个是第二种的简写，  v-slot:  可以简写为#  -->
        <p>{{ scope }}</p>
        <p>789</p>
      </template>
    </myscope>

子组件

<template>
  <div class="data">
    <p>----{{ myname }}---</p>
    <slot :data="myname" aa="qq" cc="tt"></slot>
    <slot name="myslot" :data="myname" aa="cc" cc="ss"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myname: "jack",
    };
  },
};
</script>

最后的显示效果为

在这里我们可以观察到，我们从子组件种拿到的数据是对象里面的键值对形势

{ "data": "jack", "aa": "cc", "cc": "ss" }

所以，在平时的开发情况下，我们还可以对拿到的数据进行解构，重命名，设置默认值的操作

根据开发情况使用

 ----------------------------------------------------------------------------------------------

以上就是我对slot的简单理解，看完别忘了点个赞哦~~~~~~~