Vue基础——slot插槽使用方式和场景

slot插槽使用方式和场景

一、什么是插槽

Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。
作用是：在父组件中向子组件中传递定制化的内容

作用：让父组件可以想子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==》子组件

插槽有3中类型，分别为：默认插槽、具名插槽、作用域插槽

二、插槽详情

1.默认插槽（匿名插槽）

<!-- 父组件内容 -->
<template>
  <div>
    <!--子组件标签-->
    <Category> 
        <!--子组件标签体内容，也就是需要插入的内容-->   
        <img src="https://i.postimg.cc/Gtjx71ZX/image.jpg" alt="">
    </Category> 
  </div>
</template>
 
<!-- 子组件内容 -->
<template>
   <div>
      <h3>{{title}}分类</h3>
      <!-- 在<slot>标签位置显示插入的内容-->
      <slot></slot>
  </div>
</template>

2.具名插槽

<!-- 父组件内容 -->
<category>
    <template slot="center"> 	<!-- 写法1 -->
    	<div>html结构1</div>
    </template>
    
    <template v-slot:footer>	<!-- 写法2 -->
    	<div>html结构2</div>
    </template>
</category>

<!-- 子组件内容 -->
<template>
    <div>
    	<!-- 定义插槽 -->
        <slot name="center">插槽默认内容...</slot>
        <slot name="footer">插槽默认内容...</slot>
    </div>
</template>

3.作用域插槽

<!-- 父组件内容 -->
<category>
    <template scope="scopeData">	<!-- 写法1 -->
    	<ul>
            <li v-for="(item,index) in scopeData.dataName" :key="index">{{item}}</li>
        </ul>
    </template>
    
    <template slot-scope="scopeData">	<!-- 写法2 -->
    	<ul>
            <li v-for="(item,index) in scopeData.dataName" :key="index">{{item}}</li>
        </ul>
    </template>
</category>

<!-- 子组件内容 -->
<template>
    <div>
    	<!-- 定义插槽 -->
        <slot :Data="dataName">插槽默认内容...</slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dataName: [....],
        };
    },
};
</script>

解析：数据在组件的自身，但根据数据生成的结构需要组件的使用者来觉得

三、总结

1. 通过插槽可以让用户拓展组件，去更让的复用组件和对其做定制化处理
2. 如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件就有违组件复用原则，这时就需要使用插槽来定制不同的内容来实现不同的功能
3. 通过slot插槽想组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
4. 比如布局组件、表格列、下拉选、弹框显示内容等