Vue——Slot（插槽）

使用方法

我们平常内容，都是在template里面定义的。

但在template里面使用slot以后，可以直接在html的组件标签内写内容。

实例1

<div id = 'app'>    <panel>        nsdjkfn    </panel></div><template id="panel-tpl">    <div class="panel">        <div class="title">这里是标题</div>        <div class="content">            //我们在模版content里面插入了slot标签，使得我们可以在上面的panel标签内写内容            <slot></slot>        </div>        <div class="footer">更多信息</div>    </div></template>

实例2

<div id = 'app'>    <panel>        //这里指定一下插槽的名字，即可以写内容        <div slot="content" >            内容。。。        </div>    </panel></div><template id="panel-tpl">    <div class="panel">        <div class="title">这里是标题</div>        <div class="content">             //我们指定slot的name            <slot name = "content"></slot>        </div>        <div class="footer">更多信息</div>    </div></template>