Vue进阶之组件（二）

这一篇主要是讲slot。
我的另一篇在http://blog.csdn.net/sinat_25127047/article/details/53032430
另外文章开头还是要说一下，这一篇文章借鉴了很多 http://www.cnblogs.com/keepfool/p/5637834.html
这个博主写的vue真的很好，包括画的流程图，示意图都很好。

什么是slot

官网API的说法是：

在使用组件时，常常要像这样组合它们：





注意两点：

组件不知道它的挂载点会有什么内容。挂载点的内容是由的父组件决定的。

组件很可能有它自己的模版。

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API ，参照了当前 Web组件规范草案，使用特殊的 元素作为原始内容的插槽。

先上一个demo

<div id="app">
        <my-component>
            <h1>Hello Vue.js!h1>
        my-component>
        <my-component>my-component>
    div>
    <template id="myComponent">
        <div class="content">
            <h2>This is Componenth2>
            <slot>如果没有分发内容，则显示slot中的内容slot>
            <p>Say Something....p>
        div>
    template>

Vue.component('my-component', {
    template: '#myComponent'
})
new Vue({
    el: '#app'
})

这个模板中有两个component

   <my-component>
            <h1>Hello Vue.js!h1>
        my-component>
   <my-component>my-component>

第一个中间写了一行 h1
第二个中间没有写。
我们来看看运行结果：

也就是说，如果中间不写分发内容的话，就会显示slot中的内容（第二个component）。

用官方点的话来说，slot就是一个插槽。感觉只要component中写了东西，就不会显示slot了
就是插在component中，但是显示在什么地方呢？

具名的slot

下面这行代码在template中声明了具名的插槽。

<template id="dialog-template">
        <div class="dialogs">
            <div class="dialog" v-bind:class="{ 'dialog-active': show }">
                <div class="dialog-content">
                    <div class="close rotate">
                        <span class="iconfont icon-close" @click="close">span>
                    div>
                    
                    <slot name="header">slot>
                    <slot name="body">slot>
                    <slot name="footer">slot>
                div>
            div>
            <div class="dialog-overlay">div>
        div>
    template>

完整代码，以及js

    <div id="app">
        <modal-dialog v-bind:show.sync="show">
            
            <header class="dialog-header" slot="header">
                <h1 class="dialog-title">提示信息h1>
            header>
            
            <div class="dialog-body" slot="body">
                <p>你想在对话框中放什么内容都可以！p>
                <p>你可以放一段文字，也可以放一些表单，或者是一些图片。p>
            div>
            
            <footer class="dialog-footer" slot="footer">
                <button class="btn" @click="closeDialog">关闭button>
            footer>
        modal-dialog>
        <button class="btn btn-open" @click="openDialog">打开对话框button>
    div>
    <template id="dialog-template">
        <div class="dialogs">
            <div class="dialog" v-bind:class="{ 'dialog-active': show }">
                <div class="dialog-content">
                    <div class="close rotate">
                        <span class="iconfont icon-close" @click="close">span>
                    div>
                    
                    <slot name="header">slot>
                    <slot name="body">slot>
                    <slot name="footer">slot>
                div>
            div>
            <div class="dialog-overlay">div>
        div>
    template>
body>

Vue.component('modal-dialog', {
    template: '#dialog-template',
    props: ['show'],
    methods: {
        close: function() {
            this.show = false
        }
    }
})

new Vue({
    el: '#app',
    data: {
        show: false
    },
    methods: {
        openDialog: function() {
            this.show = true
        },
        closeDialog: function() {
            this.show = false
        }
    }
})

首先说一下：

v-bind:show.sync="show"

openDialog: function() {
            this.show = true
        },
closeDialog: function() {
            this.show = false
        }

是为了绑定对话框的显示与否，只是不知道为什么要用v-bind:show.sync，异步模式？

最后总结
感觉slot很适合用来作为页面的布局，导航头、内容、尾部导航。