vue插槽的使用

1、默认插槽的使用

假设有app.vue和test.vue组件

在app.vue中

<template>
    <div>
        //下面这个test是一个组件
        <test></test>
    </div>
</template>

在test组件里面加入图片

<test>
    <h1>我是组件里面的数据</h1>
</test>

在test.vue组件中

<template>
    <div>
       <h1>头</h1>
       <h1>尾</h1>
    </div>
</template>

如果没有使用插槽的表现为

表明没有解析test组件中的

<h2>我是组件里面的数据</h2> 

这个语句，因为vue不知道这条语句放在一下的哪个地方

  <h1>头</h1>

  <h1>尾</h1>

所以vue没有解析

解决方案

<template>
    <div>
       <h1>头</h1>
       <slot></slot>
       <h1>尾</h1>
    </div>
</template>

把<h2>我是组件里面的数据</h2> 语句需要展示的位置放一个<slot></slot>插槽，表示将这条语句展示在固定位置，效果如下图所示：

 假如在app.vue中，没有在组件内部加入东西

<template>
    <div>
        //下面这个test是一个组件
        <test></test>
    </div>
</template>

但是在test组件内部却有插槽<slot></slot>

<template>
    <div>
       <h1>头</h1>
       <slot>如果组件没有传递东西，我会展示出来</slot>
       <h1>尾</h1>
    </div>
</template>

效果如下

 2、具名插槽

每个插槽具有名字这一属性，用例如下

<slot name="slot_01"><slot>
<slot name="slot_02"><slot>

<template>
    <div>
       <h1>头</h1>
       <slot name="slot_01">如果组件没有传递东西，我会展示出来</slot>
       <slot name="slot_02">如果组件没有传递东西，我会展示出来</slot>
       <h1>尾</h1>
    </div>
</template>

在组件当中指定插槽的使用

<template>
    <div>
        //下面这个test是一个组件
        <test>
            <h2 slot="slot_02">我要放在第2个插槽</h2>
            <h2 slot="slot_01">我要放在第1个插槽</h2>
        </test>
    </div>
</template>

等到的结果如下图所示