基础不牢的把vue的插槽再好好看下吧
插槽
基本概述
- 插槽是为未来可能传入的信息,预留位置的一个占位符
- 插槽可以设置默认的内容,类似ES6形参默认值
- 具名插槽
- 子组件可以定义多个插槽,每个插槽取个名字,父组件根据名字向插槽中传数据
- 注意 v-slot 只能添加在 template 标签 上 (只有一种例外情况)
- 作用域插槽
- 默认情况下,插槽中定义的数据是当前实例的数据;因此,要想让其他组件访问到插槽组件内定义的数据,就需要在插槽组件的插槽上暴露出数据。
- 单个插槽
- 插槽组件通过:data="data"暴露数据
- 父组件(可以在插槽组件标签上)通过v-slot:default="slotProps"来获取插槽组件数据
- 多个插槽(那就是有具名插槽)
- 插槽组件通过:data="data"暴露数据,name="god"提供插槽名称
- 父组件(不可以在插槽组件标签上,只能在template模板标签上)通过v-slot:god="slotProps"来获取具名插槽组件数据!
- 其他
- 插槽简写
- v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
- 作用域插槽解构赋值
- 例如v-slot:default="sonData",可以对sonData直接进行ES6对象解构;v-slot:default="{ reason }"
- 动态插槽名
- 正常 v-slot:slotName -> 动态 v-slot:[slotName]
- slot-scope等过时语法
- 插槽简写
默认内容
// 父组件
<template>
<div>
<p>我是dad</p>
<!-- 向插槽中传递内容 -->
<Son> <h1>我是默认传到子组件插槽中的内容</h1> </Son>
</div>
</template>
<script>
import Son from "./SonItem.vue";
</script>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<!-- 提供一个插槽的默认值 -->
<slot>没人向我的插槽里传数据的话,我默认就是🐖</slot>
</div>
</template>
具名插槽
// 父组件
<template>
<div>
<p>我是dad</p>
<!-- 根据名字向插槽中传递内容(乱序) -->
<Son>
<template v-slot:dog>柴犬</template>
<template v-slot:giao>小啊giao</template>
<template v-slot:pig>摇摇猪</template>
</Son>
</div>
</template>
<script>
import Son from "./SonItem.vue";
</script>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<slot name="pig">我是🐖</slot>
<slot name="dog">我是🐕</slot>
<slot name="giao">我是giao</slot>
</div>
</template>
作用域插槽
// 父组件
// 情况一:只有一个插槽
<template>
<div>
<p>我是dad</p>
<!-- 只有一个插槽,可以在组件标签上这样传递;-->
<!-- 可以简写v-bind="sonData";-->
<Son v-slot:default="sonData">
{{ "为什么会被天蝎男拒绝呢?" + sonData.reason }}
{{ "为什么会被一聊天他就去洗澡呢?" + sonData.reason }}
{{ "为什么这么久都没有对象呢?" + sonData.reason }}
</Son>
</div>
</template>
// 情况二:有多个插槽(存在具名插槽)
<template>
<div>
<p>我是dad</p>
<!-- 不可以在组件标签上使用v-slot,只能使用template -->
<Son>
<template v-slot:default="sonData">
{{ "为什么会被天蝎男拒绝呢?" + sonData.reason }}
{{ "为什么会被一聊天他就去洗澡呢?" + sonData.reason }}
{{ "为什么这么久都没有对象呢?" + sonData.reason }}
{{ "为什么这么久都没有对象呢?" + sonData.reason }}
</template>
<!-- 通过v-slot:插槽名称="数据对象" 来获取数据;-->
<template v-slot:god="data">
{{ data.excuse }}
</template>
</Son>
</div>
</template>
// 子组件
<template>
<div>
<p>我是儿子组件</p>
<slot :reason="reason"></slot>
<!-- 有多个插槽
<slot :excuse="excuse" name="god"></slot>
-->
</div>
</template>
<script>
export default {
data() {
return {
reason: "还不是因为你长的不好看",
excuse: "穷",
};
},
};
</script>
打牢基础,一步一个脚印,慢就是快,越慢越快