Vue插槽

灰太狼 2023-07-10 08:37 35阅读 0赞

官网地址：[https://cn.vuejs.org/v2/guide/components-slots.html][https_cn.vuejs.org_v2_guide_components-slots.html]

# 基本使用 #

创建一个带插槽的组件  
SlotDemo.vue

<template>
      <div>
        <h2>我是SlotDemo组件</h2>
        
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default { }
    </script>
    
    <style lang="less" scoped>
    </style>

使用  
Demo.vue

<template>
      <div>
        <slot-demo>
          
          <el-button type="success">成功</el-button>
        </slot-demo>
      </div>
    </template>
    
    <script>
    import SlotDemo from './SlotDemo.vue'
    
    export default { 
      components: { 
        'slot-demo': SlotDemo
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

运行效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]

# 带默认内容的插槽 #

SlotDemo.vue

<template>
      <div>
        <h2>我是SlotDemo组件</h2>
        <slot>插槽默认内容</slot>
      </div>
    </template>
    
    <script>
    export default { }
    </script>
    
    <style lang="less" scoped>
    </style>

Demo.vue

<template>
      <div>
        <slot-demo></slot-demo>
    
        <slot-demo>
          <el-button type="success">成功</el-button>
        </slot-demo>
      </div>
    </template>
    
    <script>
    import SlotDemo from './SlotDemo.vue'
    
    export default { 
      components: { 
        'slot-demo': SlotDemo
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

运行效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 1]

# 具名插槽 #

SlotDemo.vue

<template>
      <div>
        <h2>我是SlotDemo组件</h2>
        
        <slot></slot>
        <slot name="left"></slot>
        <slot name="center"></slot>
        <slot name="right"></slot>
      </div>
    </template>
    
    <script>
    export default { }
    </script>
    
    <style lang="less" scoped>
    </style>

Demo.vue

<template>
      <div>
        <slot-demo>
          <template v-slot:default>
            <el-button type="info">default</el-button>
          </template>
          <template v-slot:left>
            <el-button type="primary">left</el-button>
          </template>
          <template v-slot:center>
            <el-button type="success">center</el-button>
          </template>
          <template v-slot:right>
            <el-button type="warning">right</el-button>
          </template>
        </slot-demo>
    
    	
        <slot-demo>
          <template #default>
            <el-button type="info">default</el-button>
          </template>
          <template #left>
            <el-button type="primary">left</el-button>
          </template>
          <template #center>
            <el-button type="success">center</el-button>
          </template>
          <template #right>
            <el-button type="warning">right</el-button>
          </template>
        </slot-demo>
      </div>
    </template>
    
    <script>
    import SlotDemo from './SlotDemo.vue'
    
    export default { 
      components: { 
        'slot-demo': SlotDemo
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

运行效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 2]

# 编译作用域 #

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

# 作用域插槽 #

SlotDemo.vue

<template>
      <div>
        <h2>我是SlotDemo组件</h2>
        <slot :user="user">{ { user.name}}</slot>
        <br />
        <slot name="center" :user="user">{ { user.name}}</slot>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          user: { 
            name: 'tom',
            age: 24
          }
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

Demo.vue

<template>
      <div>
        
        <slot-demo>
          <template #default="slotProps">{ {  slotProps.user.age}}</template>
        </slot-demo>
    
        
        
        <slot-demo #default="slotProps">{ {  slotProps.user.age}}</slot-demo>
        <slot-demo v-slot="slotProps">{ {  slotProps.user.age}}</slot-demo>
    
        
        
        <slot-demo>
          <template #default="slotProps">{ {  slotProps.user.age}}</template>
          <template #center="slotProps">{ {  slotProps.user.age}}</template>
        </slot-demo>
      </div>
    </template>
    
    <script>
    import SlotDemo from './SlotDemo.vue'
    
    export default { 
      components: { 
        'slot-demo': SlotDemo
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

运行效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 3]

[https_cn.vuejs.org_v2_guide_components-slots.html]: https://cn.vuejs.org/v2/guide/components-slots.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301155534267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200301155836608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200301160810989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200301162704657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70