Vue2，带你看懂插槽的使用

插槽

匿名插槽

匿名插槽会储存html组件标签内匿名的标签和元素。

html代码如下：

  <!-- html -->
<div id="app">
        <father>
            <button @click="pop">弹出</button>
            <h1>这是一个h1标签</h1>
        </father>
    </div>

js代码如下：

 <template id="father">
        <div>
            这是一个Father组件
            <slot name="default"></slot> //可以简写成<slot></slot>,匿名插槽会储存默认的所有元素
        </div>
    </template>

具名插槽

只能放具体的name对应的标签元素，并且最终渲染取决于模板标签内的具名插槽顺序。

html代码如下：

   <div id="app">
        <father