vue 插槽slot

最新推荐文章于 2024-07-26 13:02:41 发布

Serein　

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量173

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/x94410891/article/details/117166785

版权

什么是slot?
slot就是就是占位符,用表示,它显示与隐藏以及最后用什么样的html模板显示由父组件控制。
1.普通插槽
在子组件中使用占位,就可以在组件的标签中输入内容,放到插槽位置显示

<div id="box">
        <aa>2222</aa>
    </div>
   <template id='aaa'>
       <div>
           <slot></slot>
       </div>
   </template>
    <script>
        Vue.component('aa',{
            template:'#aaa'
        })
        var VM = new Vue({
            el:"#box",
            data:{
                
            }
        })

2.具名插槽
使用name属性给插槽命名
使用标签和v-slot指令来使用

<div id="box">
        <aa></aa>
    </div>
   <template id='aaa'>
       <div>
           <bb>
               <template v-slot:cc>插槽</template>
           </bb>
       </div>
   </template>
   <template id='bbb'>
    <div>
        <slot name='cc'></slot>
    </div>
</template>
    <script>
        Vue.component('aa',{
            template:'#aaa',
            components:{
                bb:{
                template:'#bbb'}
            }
        })
        var VM = new Vue({
            el:"#box",
            data:{
            }
        })
    </script>

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

<div id="box">
        <aa>
            <template v-slot:[dt]>插槽</template>
        </aa>
    </div>
    <template id='aa'>
        <div>
            <slot name='cc'></slot>
            <slot name='oo'></slot>
        </div>
    </template>
    <script>
        Vue.component('aa', {
            template:"#aa"
        })
        var VM = new Vue({
            el: "#box",
            data: {
                dt: "oo"
            }

        })
    </script>