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中的内容。