9.Vue插槽

默认插槽

1：定义插槽。

<script src="js/vue.global.js"></script>
<script>
    var app = Vue.createApp({});
    app.component("KsdButton", {
        template: `<button><slot></slot></button>`
    });
    app.mount("#app");
</script>

2：使用插槽。

<div id="app">
    <ksd-button>注册</ksd-button>
    <ksd-button>登录</ksd-button>
    <ksd-button><span style="font-weight: bold">保存</span></ksd-button>
</div>

3：测试结果。

4：结论：插槽相当于占位符。

具名插槽

1：定义插槽。

<script src="js/vue.global.js"></script>
<script>
    var app = Vue.createApp({});
    app.component("KsdLayout", {
        template: `<div class="container">
                       <header><slot name="header"></slot></header>
                       <main><slot name="main"></slot></main>
                       <footer><slot name="footer"></slot></footer>
                   </div>`
    });
    app.mount("#app");
</script>

2：定义样式。

<style>
    * { margin: 0; padding: 0; }
    .container { max-width: 1200px; margin: 0 auto; color: #fff; text-align: center; }
    header { height: 50px; background: #000; }
    main { height: 150px; background: red; }
    footer { height: 50px; background: green; }
    .container * { margin: 10px; }
</style>

3：使用插槽。

<div id="app">
    <ksd-layout>
        <template v-slot:header><h1>我是头部</h1></template>
        <template v-slot:main><h1>我是内容</h1></template>
        <template v-slot:footer><h1>我是底部</h1></template>
        <template v-slot:default><h1>我是默认</h1></template>
    </ksd-layout>
    <ksd-layout>
        <template #header><h1>我是头部</h1></template>
        <template #main><h1>我是内容</h1></template>
        <template #footer><h1>我是底部</h1></template>
        <template #default><h1>我是默认</h1></template>
    </ksd-layout>
</div>

4：测试结果。

template 作用

template 是 vue 提供的一个虚拟标签，这个标签不会进行渲染，只是起到一个临时使用和隔离块的作用，比如插槽的模板的隔离，v-for 和 v-if 同时使用的问题，表格树 tree，递归组件。

默认插槽与具名插槽结合使用

1：定义插槽。

<script src="js/vue.global.js"></script>
<script>
    var app = Vue.createApp({});
    app.component("KsdLayout", {
        template: `<div class="container">
                       <header><slot name="header"></slot></header>
                       <main><slot name="main"></slot></main>
                       <footer><slot name="footer"></slot></footer>
                       <footer><slot></slot></footer>
                   </div>`
    });
    app.component("KsdHeader", {
        template: `<header><slot name="header">我是头部组件</slot></header>`,
    });
    app.mount("#app");
</script>

2：使用插槽。

<div id="app">
    <ksd-layout>
        <template #header><h1><ksd-header></ksd-header></h1></template>
        <template #main><h1>我是内容</h1></template>
        <template #footer><h1>我是底部</h1></template>
        <template #default>
            <div><h1>1</h1></div><div><h1>2</h1></div>
            <div><h1>3</h1></div><div><h1>4</h1></div>
        </template>
    </ksd-layout>
</div>

3：测试结果。

4：如果在组件中，没有定义默认插槽，那么组件中没有被具名包裹的元素，全部都会被 vue 抛弃掉。

<div id="app">
    <ksd-layout>
        <template #header><h1><ksd-header></ksd-header></h1></template>
        <template #main><h1>我是内容</h1></template>
        <template #footer><h1>我是底部</h1></template>
        <div><h1>1</h1></div><div><h1>2</h1></div>
        <div><h1>3</h1></div><div><h1>4</h1></div>
    </ksd-layout>
</div>
<script src="js/vue.global.js"></script>
<script>
    var app = Vue.createApp({});
    app.component("KsdLayout", {
        template: `<div class="container">
                       <header><slot name="header"></slot></header>
                       <main><slot name="main"></slot></main>
                       <footer><slot name="footer"></slot></footer>
                   </div>`
    });
    app.component("KsdHeader", {
        template: `<header><slot name="header">我是头部组件</slot></header>`,
    });
    app.mount("#app");
</script>

插槽作用域
1：定义插槽。

<script src="js/vue.global.js"></script>
<script>
    var app = Vue.createApp({
        data() {
            return {
                loginText: "登录",
                regText: "注册"
            }
        },
        methods: {
        }
    });
    app.component("KsdButton", {
        template: `<button><slot :btns="buttons"></slot></button>`,
        data() {
            return {
                buttons: {
                    loginText: "登录",
                    regText: "注册"
                }
            }
        }
    });
    app.mount("#app");
</script>

2：把组件中的 data 值返回给组件的调用者进行使用。

<div id="app">
    <ksd-button #default="{btns}">{ {btns.loginText} }</ksd-button>
    <ksd-button #default="{btns}">{ {btns.regText} }</ksd-button>
    <ksd-button><span style="font-weight: bold;">保存</span></ksd-button>
</div>

3：测试结果。

4：执行流程。