什么是插槽
在vue中我们经常把公共的部分抽取出来单独打包成一个组件，但是在使用这些组件的时候，我们会遇到一些内容上的区别。我们希望在这些组件上添加一些不一样内容，这时候我们就需要使用到插槽来分发内容。
-
匿名插槽
匿名插槽，我们也可以叫它单个插槽或者默认插槽。和具名插槽相对，它是不需要设置 name 属性的，它隐藏的name属性为default。
//父组件
<template>
<div class="home">
<Child>
我是/父组件给child1的
</Child>
</div>
</template>
<script>
import Child from "../components/Child.vue";
export default {
components: { Child },
data() {
return {};
},
};
</script>
//子组件
<template>
<div>
<p>我是child1</p>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
子组件通过slot接受父组件传过来的值,以下就是子组件通过slot接受父组件传给子组件的值,这就是具名插槽
BE46A361-CCD9-4778-A873-F409C20D32CA.png
-
具名插槽
这里说一下多个具名插槽的使用 多个具名插槽，插槽的位置不是使用插槽的位置而定的，是在定义的时候的位置来替换的
<template>
<div class="home">
<Child>
<template v-slot:hasName> <p>我头部</p> </template>
<template v-slot:hasName2> <p>我是尾部</p> </template>
</Child>
</div>
</template>
<script>
import Child from "../components/Child.vue";
export default {
components: { Child },
data() {
return {};
},
};
</script>
C37585CE-2C03-410E-A11A-F7B078AD2AF2.png
这里也可以看到，他们的位置是根据子组件通过name值来定的
-
作用域插槽
- 当你想在一个插槽中使用数据时，要注意一个问题作用域的问题，Vue 官方文档中说了父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
又包括了具名作用域和匿名作用域
- 匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写，具名的相反要写的是对应的name))
v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"
具名作用域
//父级
<template>
<div class="home">
<Child>
<template v-slot="{header}"> <p>{{ header.name }} {{ header.age }}</p> </template>
</Child>
</div>
</template>
<script>
import Child from "../components/Child.vue";
export default {
components: { Child },
data() {
return {};
},
};
</script>
//子级
<template>
<div>
<p>我是child1</p>
<slot :header="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: "我是header",
age: "我13岁了",
}
};
},
};
</script>
匿名作用域
// 父级
<template>
<div class="home">
<Child>
<template v-slot:hasName2="slotProps"> <p>{{ slotProps.footer.name }} {{ slotProps.footer.age }}</p> </template>
</Child>
</div>
</template>
<script>
import Child from "../components/Child.vue";
export default {
components: { Child },
data() {
return {};
},
};
</script>
// 子级
<template>
<div>
<p>我是child1</p>
<slot name="hasName2" :footer="user2"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user2: {
name: "我是footer",
age: "我13岁了",
},
};
},
};
</script>
