23.vue学习篇-插槽

在 Vue 中，插槽（Slots）是一种非常有用的功能，它允许父组件向子组件传递内容，使得子组件具有更高的可扩展性和灵活性。

一、基本概念

1.默认插槽

• 子组件在模板中使用<slot>标签来定义一个插槽，当父组件使用子组件时，可以在子组件标签内部传入内容，这些内容会被渲染到子组件的插槽位置。

  // 案例
     <!-- 子组件 -->
     <template>
       <div>
         <h2>子组件标题</h2>
         <slot>默认内容</slot>
       </div>
     </template>
  
     <!-- 父组件 -->
     <template>
       <div>
         <ChildComponent>
           <p>这是父组件传入的内容</p>
         </ChildComponent>
       </div>
     </template>

• 在这个例子中，父组件向子组件传递了一个<p>标签，这个标签的内容会被渲染到子组件的插槽位置。如果父组件没有传入任何内容，子组件的插槽会显示默认内容 “默认内容”。

2.具名插槽

• 子组件可以定义多个插槽，并为每个插槽指定一个名称。父组件在使用子组件时，可以通过<template>标签和v-slot指令来指定要传入的内容对应的插槽名称。

  // 案例
     <!-- 子组件 -->
     <template>
       <div>
         <h2>子组件标题</h2>
         <slot name="header">默认头部内容</slot>
         <slot>默认主体内容</slot>
         <slot name="footer">默认底部内容</slot>
       </div>
     </template>
  
     <!-- 父组件 -->
     <template>
       <div>
         <ChildComponent>
           <template v-slot:header>
             <h3>这是头部内容</h3>
           </template>
           <p>这是主体内容</p>
           <template v-slot:footer>
             <p>这是底部内容</p>
           </template>
         </ChildComponent>
       </div>
     </template>
  
  //在这个例子中，子组件定义了三个插槽，分别名为 “header”、“default”（未命名的插槽默认为 “default”）和 “footer”。父组件通过<template>标签和v-slot指令分别向这三个插槽传入了不同的内容。

二、作用和优势

1.提高组件的可扩展性

• 通过插槽，父组件可以向子组件传递任意内容，使得子组件可以根据不同的使用场景进行定制化渲染。这大大提高了组件的可扩展性，使得组件可以适应更多的业务需求。

2.代码复用

• 子组件可以定义一些通用的结构和逻辑，而父组件可以通过插槽传入不同的内容，实现不同的功能。这样可以避免在不同的地方重复编写相同的代码，提高了代码的复用性。

3.更好的封装性

• 子组件可以将一些复杂的逻辑封装在内部，而通过插槽暴露一些可定制的部分，使得父组件可以在不了解子组件内部实现的情况下进行定制化。这提高了组件的封装性，使得代码更加易于维护和扩展。

三、高级用法

1.作用域插槽

• 作用域插槽允许子组件向插槽传递数据，父组件可以在插槽中接收这些数据并进行渲染。这使得父组件可以根据子组件传递的数据进行更加灵活的渲染。

  // 案例
     <!-- 子组件 -->
     <template>
       <div>
         <slot :data="dataValue">默认内容</slot>
       </div>
     </template>
  
     <script>
     export default {
       data() {
         return {
           dataValue: '这是子组件的数据'
         };
       }
     };
     </script>
  
     <!-- 父组件 -->
     <template>
       <div>
         <ChildComponent>
           <template v-slot="{ data }">
             <p>{{ data }}</p>
           </template>
         </ChildComponent>
       </div>
     </template>
  
  // 在这个例子中，子组件通过插槽向父组件传递了一个名为 “data” 的数据，父组件在插槽中接收这个数据并进行渲染。

2.动态插槽名

• 在某些情况下，可能需要根据动态的条件来决定使用哪个插槽。可以通过在父组件中使用v-slot:[dynamicSlotName]的方式来实现动态插槽名。

  // 案例
     <!-- 子组件 -->
     <template>
       <div>
         <slot name="slot1">默认内容 1</slot>
         <slot name="slot2">默认内容 2</slot>
       </div>
     </template>
  
     <!-- 父组件 -->
     <template>
       <div>
         <ChildComponent>
           <template v-slot:[dynamicSlotName]>
             <p>这是动态插槽的内容</p>
           </template>
         </ChildComponent>
       </div>
     </template>
  
     <script>
     export default {
       data() {
         return {
           dynamicSlotName: 'slot1'
         };
       }
     };
     </script>
  
  // 在这个例子中，父组件根据dynamicSlotName变量的值来决定使用哪个插槽。

  总之，插槽是 Vue 中一个非常强大的功能，它可以提高组件的可扩展性、复用性和封装性。通过合理地使用插槽，可以使 Vue 应用的开发更加高效和灵活。