具名插槽slot的使用

当子组件的功能复杂时,子组件的插槽可能并非是一个。
这个时候,就需要给插槽起一个名字

只要给slot元素一个name属性即可
<slot name = 'myslot‘ > < /slot >
然后在组件里面使用这个name

<body>
    <div id="opp">
        <cpn>
            <slot><h3 slot='left'>左边</h3></slot>
            <slot><h3 :slot="center">中间</h3></slot>
            <slot><h3 slot="right">右边</h3></slot>
        </cpn>
    </div>
</body>


<template id="app">
    <div>
        <slot name='left'><h3>标题</h3></slot>
        <slot v-slot='center'><span>标题</span></slot>
        <slot name='right'><h3>标题</h3></slot> 
    </div>
</template>

<script src="./js/vue.js"></script>
<script>
    const opp = new Vue({
        el:'#opp',
        components:{
            cpn:{
                template:'#app'
            }
        }
    })
</script>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读