come on man!! (*^▽^*) 了解一下vue插槽(slot)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52139966/article/details/117336299

本文详细介绍了Vue.js中的插槽机制，包括普通插槽、具名插槽和动态插槽的使用方法。通过插槽，组件可以更加灵活地接收父组件传入的模板代码，实现内容定制。普通插槽通过<slot>标签在子组件中定义；具名插槽通过v-slot和name属性指定插槽名称；动态插槽则利用变量动态决定插槽的名称，从而实现不同位置的内容插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽:

插槽主要分为三类:普通插槽,具名插槽,动态插槽.
插槽供组件传对应的模板代码进去,让组件变得更加灵活,在父组件的子组件标签内定义内容不会被渲染,使用插槽就可以解决.

(一)普通插槽:

1.子组件内定义slot标签
2.父组件的子组件标签内使用<template></template>标签插入内容

 <div id="box">
       <aa></aa>
 </div>
 <template id="my1">
      <div><h1>我是父组件</h1>
            <bb>
               <template>插槽b</template> 
            </bb>
      </div>
</template>
<template id="my2">
     <div>
         <h1>我是子组件</h1>
         <slot></slot> 
     </div>
    </template>
    <script>
        Vue.component('aa',{
            template:'#my1',
            components:{
                bb:{
                    template:'#my2',
            }}
        })
        var vm = new Vue({
            el:'#box',
        })
   </script>
</body>

(二)具名插槽:

1.给插槽起一个name名
2.在子组件标签内的<template>标签中使用v-slot:name名  绑定

 <div id="box">
      <aa></aa>
 </div>
 <template id="my1">
      <div><h1>我是父组件</h1>
            <bb>
            	<template v-slot:f1>我是第一个插槽</template> 
            	<template v-slot:f2>我是第二个插槽</template>
            </bb>
      </div>
 </template>
 <template id="my2">
    <div>
       <h1>我是子组件</h1>
       <h1>第一个</h1>
       <slot name='f1'></slot>
       <h1>第二个</h1>
       <slot name='f2'></slot> -->
    </div>
 </template>
 <script>
        Vue.component('aa',{
            template:'#my1',
            components:{
                bb:{
                    template:'#my2',
            }}
        })
        var vm = new Vue({
            el:'#box',
        })
    </script>

(三)动态插槽:

1.<slot name='aa'></slot> 使用name属性给插槽命名
2.使用 <template v-slot:[变量]></template> v-slot指令的值使用[]包裹起来,就可以解析里面的变量

 <div id="box">
     <aa>
        <!-- 把变量用[]包裹起来 -->
        //aa里的动态插槽,nn属性改变来改变<h1>标签显示的位置
         <template v-slot:[nn]>   
              <h1>8888888</h1>
         </template>
      </aa>    
 </div>
 <script>
    var aaT=`
        <div>
          <h1>a1-----</h1>
          <slot name='a1'></slot>
          <h1>a1-----</h1>
          <h1>a2-----</h1>
          <slot name='a2'></slot>
          <h1>a2-----</h1>
          <bb>
           	//aa里的动态插槽,mm属性改变来改变<h1>标签显示的位置
            <template v-slot:[mm]>   
                <h1>bbbbb</h1>
            </template>
          </bb>
     	</div>`
   Vue.component('aa',{
         template:aaT,
           data(){
                return{
                   mm:'b1' //控制子组件bb里的动态插槽
                }
            }
        })

   var bbT=`
        <div>
          <h1>a1-----</h1>
          <slot name='b1'></slot>
          <h1>a1-----</h1>
          <h2>a2-----</h2>
          <slot name='b2'></slot>
          <h1>a2-----</h1>
      </div> `
   Vue.component('bb',{
            template:bbT,
            data(){
                return{
                   
                }
            }
        })
    var VM = new Vue({
            el:"#box",
            data:{
                nn:"a2"//控制父组件aa里的动态插槽
            }        
        })
  </script>