Vue插槽

插槽

插槽内可以包含任何模板代码,包括 HTML,其他组件。
当一个父组件需要传dom元素给子组件可以使用插槽

<template>
    <div>
       <v-home>
        <h1>父组件传的内容</h1>
       </v-home>
    </div>
</template>
<script>
export default{
    components:{
        "v-home":{
            template:`<div>
                        <p>子组件</p>
                        <slot></slot>
                    </div>`
        }
    }
}
</script>

这里的<slot></slot>会被父组件传过来的<h1>父组件传的内容</h1>替换掉

默认内容:

就是在slot标签之间附上默认内容
我们将子组件的内容换成

"v-home":{
            template:`<div>
                        <p>子组件</p>
                        <slot>默认内容</slot>
                    </div>`
        }

那么,如果模板里如此写<v-home> </v-home>,或显示为默认内容。

具名插槽:给插槽起名字,按需引入插槽

<template>
    <div>
       <v-home>
        <div class="header" slot="header">header</div>
        <div class="footer" slot="footer">footer</div>
       </v-home>
    </div>
</template>
<script>
export default{
    components:{
        "v-home":{
            template:`<div>
                        <slot name="header"></slot>
                        <div class="body">body</div>
                        <slot name="footer"></slot>
                    </div>`
        }
    }
}
</script>

作用域插槽

举个例子,当子组件内部需要做循环,但是循环的样式必须有外部决定(<li>{{props.item}}</li>可以改成<h1>{{props.item}}</h1>或者其他),那么可以使用作用域插槽。
当父组件调用子组件是,传入的元素必须要由一个template标签包裹,由slot-scope="props"接收子组件循环的数据。

<template>
    <div>
       <v-home>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
       </v-home>
    </div>
</template>
<script>
export default{
    components:{
        "v-home":{
            data:function(){
                return{
                    list:[1,2,3,4,5]
                }
            },
            template:`<div>
                        <ul>
                            <slot v-for="item of list"
                                :item='item'
                            ></slot>
                        </ul>
                    </div>`
        }
    }
}
</script>

以上代码子组件实际上会编译为(个人理解):

        <ul>
			<template  v-for="item of list">
                <li>{{item}}</li>
            </template>
        </ul>

总结

1、插槽,可以理解为组件标签包裹dom结构或组件,包裹的dom结构或组件会替换在组件内的<slot></slot>元素。
2、默认内容:插槽可以有默认值<slot>默认内容</slot>,即使父组件调用子组件时不传入dom结构,会显示slot包裹的默认内容
3、具名插槽:生命slot时带上name特性<slot name="kk"></slot>,然后在父组件在子组件插入dom结构时,带上slot="kk"特性,如<div class="header" slot="header">header</div>
4、作用域插槽:父组件使用插槽时,可以获取子组件传来的数据,必须使用template包裹dom结构,使用slot-scope获取子组件传过来的数据
子组件: <slot v-for="item of list" :item='item'></slot>
父组件:使用slot-scope="props"获取一个props对象,这个对象包含子组件传过来的数据

       <v-home>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
       </v-home>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kitt15

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值