vue 插槽及scope

使用模板,会将内容替换成模板内容,在模板标志内的text就会没有了,这时需要用插槽使内容显示。
scope返回的值是slot标签上返回的所有属性值。
插槽
一、插槽内容

一句话:插槽内可以是任意内容。

先看一下下面的代码:声明一个child-component组件,

如果现在我想在
   <child-component></child-component>内放置一些内容,结果会是怎样?

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

<child-component>你好</child-component>
输出内容还是在组件中的内容,在<child-component>内写的内容没起作用。

这就是插槽出现的作用。

我们现在给组件增加一个插槽

我们在内写的"你好"起作用了!!!

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

到现在,我们知道了什么是插槽:

插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。

这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容

就会跑到它这里了!

二、具名插槽

具名插槽,就是给这个插槽起个名字

在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。

然后再<c

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值