Vue.js 基础学习之插槽slot

在组件中用slot插槽可以使组件中添加的内容可改，若直接定义组件，则组件中的内容只能在组件中改动，但是如果用上slot插槽便不同了

如：

<div id="app">
    <panel></panel>
    </div>
    <template id="panel-tpl">
        <div class="panel" style="width: 500px;border: 1px solid #999;">
        <div class="title" style="padding: 15px;border-bottom: 1px solid #999;">{{title}}</div>
        <div class="content" style="padding: 15px;">{{content}}</div>
        <div class="footer" style="padding: 15px; border-top:1px solid #999;">{{footer}}</div>
    </div>
    </template>

<script>
    Vue.component('panel',{
        template : '#panel-tpl',
        data : function(){
            return {
                title : '标题',
                content : '内容',
                footer : '底部',
            };
        }
    });
    new Vue({
        el : '#app',
    });
</script>

上面这段代码便只能在组件panel内部改动各部分内容。有了slot我们便可以在外部改动了，若只有一个slot则组件标签中间的内容便是slot标签所在地方的内容

<div id="app">
    <panel>
        {{ content }}
    </panel>
    </div>
    <template id="panel-tpl">
        <div class="panel" style="width: 500px;border: 1px solid #999;">
        <div class="title" style="padding: 15px;border-bottom: 1px solid #999;">{{title}}</div>
        <div class="content" style="padding: 15px;">
        <slot></slot>
        </div>
        <div class="footer" style="padding: 15px; border-top:1px solid #999;">{{footer}}</div>
    </div>
    </template>

<script>
    Vue.component('panel',{
        template : '#panel-tpl',
        data : function(){
            return {
                title : '标题',
                content : '内容',
                footer : '底部',
            };
        }
    });
    new Vue({
        el : '#app',
        data : {
            content : '这是外部设置的内容',
        },
    });
</script>

若有多个slot，则要为每个slot设置一个name 

<div id="app">
    <panel>
        <div slot='title'>{{title}}</div>
        <div slot='content'>{{content}}</div>
        <div slot='footer'>{{footer}}</div>
    </panel>
        输入标题：<input type="text" v-model='title'>
        输入内容：<input type="text" v-model='content'>
        输入底部：<input type="text" v-model='footer'>
    </div>
    <template id="panel-tpl">
        <div class="panel" style="width: 500px;border: 1px solid #999;">
        <div class="title" style="padding: 15px;border-bottom: 1px solid #999;">
            <slot name='title'></slot>
        </div>
        <div class="content" style="padding: 15px;">
        <slot name='content'></slot>
        </div>
        <div class="footer" style="padding: 15px; border-top:1px solid #999;">
            <slot name='footer'></slot>
        </div>
    </div>
    </template>

<script>
    Vue.component('panel',{
        template : '#panel-tpl',
    });
    new Vue({
        el : '#app',
        data : {
            title : '这是外部设置的标题',
            content : '这是外部设置的内容',
            footer : '这是外部设置的底部',
        },
    });
</script>

上面这段代码可以通过input输入框动态的改变组件panel中的内容。