14.占位区间命名

Vue 2 入门学习笔记 /

本系列文章为laracasts.com 的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。

视频源码地址：github.com/laracasts/Vue-Forms

项目初始版本为Vue 2.1.3，教程还在更新中。

本节说明

对应第 14 小节：Named Slots in Nutshell

本节内容

在之前的小节中，我们曾经利用Vue的<slot>元素来显示组件中的插值。但是我们并没有将插值细分成例如title、content等更细粒度的元素，本节我们来做这样的事。我们的例子从 Bulma 网站选取，引入样式跟组件：

index.html

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
    </head>

    <body>
        <div id="root" class="container">
            <modal></modal>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script src="main.js"></script>
    </body>
</html>

编写组件：

  Vue.component('modal',{
    template:`
    <div class="modal is-active">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Modal title</p>
                <button class="delete" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                Temparary content for now
            </section>
            <footer class="modal-card-foot">
                <button class="button is-success">Save changes</button>
                <button class="button">Cancel</button>
            </footer>
        </div>
    </div>
    `
});

new Vue({
    el:'#root'
});

注：需要添加is-active样式类

打开浏览器查看效果：
file
现在我们来动态加载不同的<slot>内容：

main.js

  Vue.component('modal',{
    template:`
    <div class="modal is-active">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">
                    <slot name="title">
                        Default Title
                    </slot>
                </p>
                <button class="delete" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                <slot>
                    Default Content.
                </slot>
            </section>
            <footer class="modal-card-foot">
                <slot name="footer">
                    <button class="button is-success">Okay</button>
                </solt>
            </footer>
        </div>
    </div>
    `
});

new Vue({
    el:'#root'
});

我们给每个<slot>都给定了默认值，直接刷新页面：
file
下面我们来进行赋值：

index.html

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
    </head>

    <body>
        <div id="root" class="container">
            <modal>
                <template slot="title">My Title</template>

                something is here.

                <div slot="footer">
                    <button class="button is-success">Save changes</button>
                    <button class="button">Cancel</button>
                </div>
            </modal>
        </div>

        <script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>

        <script src="main.js"></script>
    </body>
</html>

刷新页面：
file