vue 基础 具名插槽的使用

vue 具名插槽的使用

        <div id="app">
            <cpn><span slot="center">标题</span></cpn>
            <cpn><button slot="left">标题</button></cpn>
             
        </div>
        <template id="cpn">
            <div>
                <slot  name="left"><span>返回</span></slot>
                <slot  name="center"><span>标题</span></slot>
                <slot  name="right"><span>更多</span></slot>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好",
                },
                methods: {},
                components: {
                    cpn: {
                        template: "#cpn",
                    },
                },
            });
        </script>

说明：具名插槽的使用
1.在子组件cpn 中定义 slot 并给slot name属性

            <div>
                <slot  name="left"><span>返回</span></slot>
                <slot  name="center"><span>标题</span></slot>
                <slot  name="right"><span>更多</span></slot>
            </div>

2.在app中使用cpn组件 去填充名字为center的插槽，渲染一个div（把center改为标题其他的不动）
3.在app中使用cpn组件 去填充名字为 left 的插槽 ，渲染一个div（把返回改为button 标题）