插槽（slot） #
插槽的作用 #
- 组件的插槽，为了让我们封装的组件更具有扩展性，例如导航栏封装为一个nav-bar组件，但是不同的使用，组件的样式都不一样
- 可以让使用者决定组件内部的一些内容展示什么（对组件进行扩展）
使用 #
默认插槽（单个组件，一个插槽） #
子组件
<template>
<div>
<!-- 组件的固有内容 -->
<h1>title</h1>
<!-- 声明插槽，默认将组件替换为组件使用者放入组件标签的所有内容-->
<slot>
<!-- 默认值，组件使用者未添加内容到组件标签中，就会展示默认值 -->
<h2>defalut</h2>
</slot>
</div>
</template>
<script>
export default {
name: "MyComp"
}
</script>
父组件
<template>
<div>
<MyComp>
<!-- 组件标签内内容，将会替换组件的插槽slot标签 -->
<h2>Hello World</h2>
</MyComp>
</div>
</template>
<script>
import MyComp from './components/MyComp.vue'
export default {
name: 'App',
components: {
MyComp
}
}
</script>
具名插槽（单个组件中，多个插槽） #
子组件
<template>
<div>
<!-- 组件的固有内容 -->
<h1>title</h1>
<!-- 声明插槽1-->
<slot name="slot1">
<h2>defalut1</h2>
</slot>
<!-- 声明插槽2 -->
<slot name="slot2">
<h2>defalut2</h2>
</slot>
</div>
</template>
<script>
export default {
name: "MyComp"
}
</script>
父组件
<template>
<div>
<MyComp>
<!-- 替换slot1插槽,对于没有替换的插槽,还是使用默认值 -->
<h2 slot="slot1">Hello World</h2>
</MyComp>
</div>
</template>
<script>
import MyComp from './components/MyComp.vue'
export default {
name: 'App',
components: {
MyComp
}
}
</script>
作用域插槽 #
父组件的模板的所有东西都会在父级作用域内编译，子组件的模板的所有东西都会在子级作用域内编译
作用域插槽的作用：父组件替换插槽的标签，但是数据由子组件提供，也就是样式不同、数据相同
子组件
<template>
<div>
<!-- 组件的固有内容 -->
<h1>title</h1>
<!-- 声明插槽,并且将msg传给组件的使用者-->
<slot :msg="msg">
<h2>defalut1</h2>
</slot>
</div>
</template>
<script>
export default {
name: "MyComp",
data() {
return {
msg: 'Hello World',
};
},
}
</script>
父组件
<template>
<div>
<MyComp>
<!-- 组件的使用者,需要使用slot-scope接收子组件传来的数据-->
<h2 slot-scope="childData">{{childData.msg}}</h2>
</MyComp>
</div>
</template>
<script>
import MyComp from './components/MyComp.vue'
export default {
name: 'App',
components: {
MyComp
}
}
</script>