2.具名插槽使用 

<body>
    <div id="app">
        <cpn>
            <span slot="center">标题</span>
        </cpn>
        <cpn> <button slot="left">下一步</button> </cpn>
    </div>
    <template id="cpn">
        <div>
            <!-- 如果子组件里面有多个插槽 有时候需要替换某一个插槽的时候 可以给插槽取名字  <slot name="left">
            在父组件里面 写上更改的那个插槽名字  slot="left" -->
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
        </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        const cpn = {
            template: "#cpn",
        }
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                cpn,
            }
        })
    </script>
</body>

 

posted @ 2020-12-29 15:39  闭上耳朵  阅读(111)  评论(0)    收藏  举报