简单理解slot :
通俗易懂的讲,slot具有 占坑 的作用,
在子组件占好了位置,
那父组件使用该子组件标签时,
新添加的 DOM元素 就会自动填到这个坑里面
具名插槽:
实现:
先在子组件对应分发slot标签里,
添加name='name名' 属性,
其次父组件在要分发的标签里添加 slot='name名' 属性,
然后就会将对应的标签放在对应的位置了
简单理解就是:
给子组件占的每一个坑取名,
将父组件添加的 HTML元素 添加到指定名字的坑,
就实现了分发内容在不同位置显示。
演示代码片段:
父组件:
import 子组件 Son
<Son>
<span slot='top'>具名插槽</span>
<span slot="header">上</span>
<span slot="center">中间</span>
<span slot="footer">下</span>
</Son>
子组件:
<template>
<h3>子组件</h3>
<div>
<slot name='top'></slot>
<slot name="header"></slot>
<slot name="center"></slot>
<slot name="footer"></slot>
</div>
</template>
成果:
编辑作用域:
实现:
父组件模板的内容在父组件作用域内编译;
子组件模板的内容在子组件作用域内编译;
演示代码片段:
父组件:
import 子组件 Son
<template>
<Son>
<span slot="header">编辑作用域</span>
<h1>{{msg}}</h1>
</Son>
</template>
<script>
export default {
data() {
return {
msg: '我是父组件的内容'
}
}
}
</script>
子组件:
<template>
<h3>子组件</h3>
<div>
<slot name="header"></slot>
<h1>{{msg}}</h1>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
msg: '我是子组件里面的内容'
}
}
}
</script>
成果:
解构 slot-scope:
实现:
在子组件中插槽中通过:data绑定了数据,
父组件可以通过slot-scope="name"来取得子组件作用域插槽:data绑定的数据,
name的名称可以随便取,
用来定义对象来代替取到的data数据。
演示代码片段:
父组件:
import 子组件 Son
<template>
<Son>
<div slot-scope="ok">
<span v-for="item in ok.data">{{item}} </span>
</div>
</Son>
<!-- 直接显示数据 -->
<Son>
<div slot-scope="ok">
<span>{{ok.dataInnerText}} </span>
</div>
</Son>
<!-- 不使用其提供的数据, 作用域插槽退变成匿名插槽 -->
<Son>
<div>我是插槽</div>
</Son>
</template>
子组件:
<template>
<h3>子组件</h3>
<div>
<slot :dataInnerText="dataInner"></slot>
</div>
</template>
<script>
export default {
data() {
return {
dataInner: ["one-", "-two-", "-three-", "-four"]
}
}
}
</script>
成果:
over