Vue中插槽使用——默认插槽、具名插槽、作用域插槽
插槽(slot)
1、作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件
2、分类:默认插槽(匿名插槽)、具名插槽、作用域插槽
3、<slot>元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
4、在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。
默认插槽
NiMing.vue
<!-- 匿名插槽 -->
<template>
<div class="category">
<h3>{
{ title }}分类</h3>
<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
</div>
</template>
<script>
export default {
name: "NiMing",
props: ["title"],
};
</script>
<style scoped>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {