抽象理解
将 调用子组件的父组件 假设成一个凹陷的地面。
将 被调用的子组件 比喻成这个地面凹陷处的填充物,比如说水池。
这个水池可以被分成许多份,每一份小水池都由这个子组件来决定、命名。
被分成许多份的小水池,是否出现使用由调用这个子组件的父组件决定。
代码理解
默认代码
父组件
<template>
<div>
<h3>这里是父组件</h3>
<child>
<span>我是父组件定义的</span>
</child>
</div>
</template>
子组件
<template>
<div>
<h3>这里是子组件</h3>
<h3>这里是slot标签上面</h3>
<!-- <slot></slot>-->
<h3>这里是slot标签下面</h3>
</div>
</template>
效果显示( slot 被注释了,并没有效果哟 )
注:一定一定要留意,父组件里面的 span 标签并没有显示效果
默认插槽、匿名插槽
保持父组件代码不变,更改子组件代码
<template>
<div>
<h3>这里是子组件</h3>
<h3>这里是slot标签上面</h3>
<slot></slot>
<h3>这里是slot标签下面</h3>
</div>
</template>
效果显示(子组件的 slot 的注释被取消了,数据显示)
使用总结:
- 在父组件模板里,插入在子组件标签内的所有内容将替代子组件的标签及它的内容,比如:上述父组件中的 span 标签,显示在子组件里面,也就是 slot 所在的位置。
- 父组件在子组件中定义的所有内容,默认都是被 slot 标签代替的。(匿名标签、默认标签)。
命名插槽、具名插槽
还记得开头的时候,那个水池可以被划分为多个水池吗?
我们可以在父组件中写多个 slot 标签,并通过命名的方式来指定区分使用它们。
新的父组件代码
<template>
<div>
<h3>这里是父组件</h3>
<child>
<span slot="default">我是父组件定义的</span>
<span slot="one">我是父组件定义的one</span>
<span>啊!我没有slot标签</span>
<span slot="two">我是父组件定义的two</span>
<span slot="four">我是父组件定义的four</span>
<span slot="five">我是父组件定义的five</span>
<span>啊!我也没有slot标签</span>
</child>
</div>
</template>
新的子组件代码
<template>
<div>
<h3>这里是子组件</h3>
<h3>这里是slot标签上面</h3>
<slot></slot><br/>
<slot name="two"></slot><br/>
<slot name="third"></slot><br/>
<slot name="five"></slot><br/>
<slot name="four"></slot><br/>
<h3>这里是slot标签下面</h3>
</div>
</template>
效果显示
使用总结:
- 首先先看第一行,其实这一行是由父组件中具体化的两个span组成。当父组件中的 slot 命名为 default 时,或者只有 slot 标签时,再或者连 slot 标签都没有,都会被顺序加入到 slot 命名为 default 的标签中。效果等同于匿名插槽(默认插槽)了。总的来说,如下,在子组件中定义的代码效果相同,都会被默认为 default。
- 此次,看这些 span 出现的顺序,是在子组件中定义好的。
- 再看,我们可以发现效果显示中有一个空行,那是因为有个 span 标签没有被父组件使用。也就是说,子组件中 的 slot 插槽是否使用由父组件控制。
- 再再看,在父组件中,使用了一个名字(one)在子组件没有定义的插槽,这自然是不会出现的。
作用域插槽
新的父组件代码:
<template>
<div>
<h3>这里是父组件</h3>
<child>
<span slot="default">我是父组件定义的</span>
<span slot="one">我是父组件定义的one</span>
<span slot="two">我是父组件定义的two</span>
<span slot="four">我是父组件定义的four</span>
<span slot="five">我是父组件定义的five</span>
<span>啊!我没有被slot标签</span>
<div slot="six" slot-scope="get">
乖兔儿父组件接收了子组件的数据:{{get.scope1}}
<br/>
乖兔儿收到了来自组件的惊喜:{{get.scope2}}
</div>
</child>
</div>
</template>
新的子组件代码:
<template>
<div>
<h3>这里是子组件</h3>
<h3>这里是slot标签上面</h3>
<slot name="default"></slot><br/>
<slot name="two"></slot><br/>
<slot name="third"></slot><br/>
<slot name="five"></slot><br/>
<slot name="four"></slot><br/>
<slot name="six" :scope1="data" :scope2="data2"></slot>
<h3>这里是slot标签下面</h3>
</div>
</template>
<script>
export default {
name: "Child",
data () {
return {
data: '子组件表达了自己亿点点心意。',
data2: '子组件出其不意又表达了自己亿点点心意。'
}
}
}
</script>
效果显示:
使用总结:
- 数据传递就像普通使用的参数传递方式,不同的是,子组件传递数据给父组件。
- 在父组件中定义好接受的域名名字,然后在子组件中定义好要发送的数据。
- 继上第二点,父组件中定义域名名字使用 slot-scope。通过这个域名,可以访问插槽传递过来的不同数据。具体使用查看上面的代码。