插槽的意义vue

一、三种插槽的定义
1、插槽分为三种：
默认插槽 具名插槽 作用域插槽
1）.默认插槽
【定义：默认插槽是将父组件的结构和数据插入子组件中，默认插槽只有一个插入位置，要插入的html结构和data数据必须在父组件中，不过css可以在子组件中】
【简述：将父组件的自定义html和data插入子组件的对应位置】
【特点：父组件决定结构和数据】

2）.具名插槽
【定义：具名插槽和默认插槽类似，只是默认插槽只有一个插入位置，具名插槽可以有多个插入位置】
【简述：将多个父组件的自定义html和data插入子组件的多个位置】
【特点：父组件决定结构和数据】

3）.作用域插槽
【定义：作用域插槽的data数据固定写在子组件中，数据的html结构根据父组件传入的html结构来决定】
【简述：根据父组件中不同的html结构解析data中的数据】
【特点：子组件决定数据，父组件决定结构】

默认插槽

//2、在页面中使用
<!-- 父组件 -->
<template>
 <my-test>
     我是传入插槽的值，会替换掉默认值
 </my-test>
</template>

//1、封装的插槽组件 MyTest.vue，组件内需要定制的结构部分，改用<slot></slot>占位，可以写默认值，使用插槽的时候如果传了值会把默认值替换掉
<!-- 子组件 -->
 <div class="box">
    <div class="title">
        标题
    </div>
    <div class="content">
        <slot>我是默认内容</slot>
    </div>
    <div class="button">
        <button>按钮</button>
    </div>
 </div>

具名插槽

//父组件
<template>
	<div>
		<!-- 插槽位置 -->
		<slot name="header">插槽未被调用时会显示此内容</slot>
		<slot name="center">插槽未被调用时会显示此内容</slot>
		<slot name="footer">插槽未被调用时会显示此内容</slot>
	</div>
</template>

//子组件
<template>
	<div>
		<!-- 插槽位置 -->
		<slot name="header">插槽未被调用时会显示此内容</slot>
		<slot name="center">插槽未被调用时会显示此内容</slot>
		<slot name="footer">插槽未被调用时会显示此内容</slot>
	</div>
</template>

作用域插槽

//父组件通过 <template> 元素的 v-slot 指令来定义插槽，并指定了 v-slot:default这是默认的插槽名。父组件中定义的插槽作用域使用 slotProps 这个参数来接收子组件传递的数据和方法。在插槽作用域中，可以直接访问 slotProps 对象的属性和方法。
<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <!-- 使用插槽作用域 v-slot:插槽名，可以简化为#插槽名 -->
      <!--默认插槽名为default,可以省略default直接写v-slot,缩写为#时不能不写参数，写成#default-->
      <template v-slot:default="slotProps">
        <p>父组件的数据：{{ slotProps.data }}</p>
        <button @click="slotProps.handleClick">点击我</button>
      </template>
    </child-component>
  </div>
</template>

//在子组件中，使用 <slot> 元素渲染插槽，并通过属性绑定的方式将数据和方法传递给插槽。
<!-- 子组件 -->
<template>
  <div>
    <!-- 渲染插槽，并将数据和方法作为参数传递给插槽 -->
    <slot :data="data" :handleClick="handleClick"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: '这是子组件的数据'
    };
  },
  methods: {
    handleClick() {
      console.log('点击了按钮');
    }
  }
};
</script>

二、应用场景
插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据