Vue slot分发内容

2018-06-24 01:05:29来源：未知阅读 ()

1、概述

slot:混合父组件的内容和子组件的模板。

slot分发的内容，作用域在父组件上。

2、单个slot

子组件使用<slot>，在父组件模板里，插入子组件标签里的内容替换子组件slot标签以及它的内容。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <my-component>
                <p>分发的内容</p>
                <p>更多分发的内容</p>
            </my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: `<div>
                <slot>
                <p>如果父组件没有插入内容,我将作为默认内容出现</p>
                </slot>
                </div>
                `
            });
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>

3、具名slot

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <my-component>
                <h2 slot='header'>标题</h2>
                <p>正文内容</p>
                <div slot='footer'>底部信息</div>
            </my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: `
                    <div class="container">
                        <div class="header">
                            <slot name="header"></slot>
                        </div>
                        <div class="main">
                            <slot></slot>
                        </div>
                        <div class="footer">
                            <slot name="footer"></slot>
                        </div>
                    </div>
                `
            });
            new Vue({
                el: "#app"
            })
        </script>
    </body>

</html>