vue中的插槽(slot)

插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

分为          默认插槽、具名插槽、作用域插槽

           1.默认插槽        指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到默认插槽中。

                

//子组件child
vue.component('child',{
template:'<div>
            <p>hello</p>
            <slot>**(可在此定义默认内容)**</slot>
         </div>'
    })

//父组件
<div>
    <child>
        <p>world</p>//插入slot的内容
    </child>
</div>

     注意:若是子组件中没有slot,则传入它的任何内容都会被抛弃  

           2.具名插槽   给具体的插槽命名,并在使用的时候传入插槽的名称  

        通过 name 属性设置了名字的插槽

        具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值