1. 概述

非理性定律告诉我们:

人们总是习惯于以情感去判断眼前的事物,非理性的去做决定。

对于长远的利益,人们更愿意去选择短期的利益。

因此在做决定前要让自己冷静,理性的分析,让自己看的更远。

言归正传,今天我们来聊一个新的概念 —— 插槽。

2. 插槽的使用

2.1 一个简单的例子

我们先来看一个简单的例子

<body>
<div id="myDiv"></div>
</body>
<script> const app = Vue.createApp({
template:`
<div>
<my-form />
</div>
`
});
app.component("my-form", {
methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<input />
<button @click="myClick">提交</button>
</div>
`
});
const vm = app.mount("#myDiv");

这个例子很简单,我们在子组件中写了一个文本框,文本框的后面是一个按钮,点击按钮会 alert 一个提示

2.2 父组件决定按钮的样式

如果我们希望子组件更灵活、复用性更强,子组件按钮的样式可以由父组件去改变,该怎样做呢,我们看下面的例子

    const app = Vue.createApp({
template:`
<div>
<my-form>
<div>提交</div>
</my-form>
<my-form>
<button>提交</button>
</my-form>
</div>
`
}); app.component("my-form", {
methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<input />
<slot @click="myClick"></slot>
</div>
`
});

这里我们使用了插槽(slot)的概念,父组件使用子组件时,组件标签中间的部分就是插槽的内容,

例如:<my-form><div>提交</div></my-form> 中,<div>提交</div> 就是插槽的内容

子组件定义时,可以使用 <slot /> 获取到父组件定义的插槽的内容

这个例子中,父组件使用了两次 my-form 子组件,但按钮的样式是不同的。

但这个例子中有一个问题,我们会发现点击【提交】按钮没有任何效果,这是因为 slot 标签是不能直接绑定事件的,下面我们来解决这个问题

2.3 插槽绑定事件

slot 标签不能直接绑定事件,通常的做法是在外层加一个 span 标签,然后把事件绑定到 span 标签上

    const app = Vue.createApp({
template:`
<div>
<my-form>
<div>提交</div>
</my-form>
<my-form>
<button>提交</button>
</my-form>
</div>
`
}); app.component("my-form", {
methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<input />
<span @click="myClick">
<slot></slot>
</span>
</div>
`
});

2.4 子组件作为插槽的内容

插槽的内容,可以是普通标签、普通字符串,也可以是其他的子组件

    const app = Vue.createApp({
template:`
<div>
<my-form>
<my-button />
</my-form>
</div>
`
}); app.component("my-button", {
template: `
<div>my-button组件按钮</div>
`
}); app.component("my-form", {
methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<input />
<span @click="myClick">
<slot></slot>
</span>
</div>
`
});

这个例子中,我们在 my-button 组件中定义了一个 div按钮,然后在父组件中把 <my-button /> 作为插槽的内容,VUE 是支持的

2.5 插槽中使用数据

插槽中也是可以使用数据的

    const app = Vue.createApp({
data() {
return {
buttonName : '提交'
}
},
template:`
<div>
<my-form>
<div>{{buttonName}}</div>
</my-form>
<my-form>
<button>{{buttonName}}</button>
</my-form>
</div>
`
});
app.component("my-form", { methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<input />
<span @click="myClick">
<slot></slot>
</span>
</div>
`
});

这个例子中,插槽内容中的按钮的名称,取自父组件的数据 buttonName

注意:父组件中的插槽内容使用的是父组件的数据,而不是子组件的数据。也就是说,插槽的机制是:先用数据替换好插槽内容后,再传到子组件。

2.6 插槽的默认值

如果父组件想省事,不想指定子组件的按钮样式,此时,就需要我们指定插槽的默认内容

    const app = Vue.createApp({
data() {
return {
buttonName : '提交'
}
},
template:`
<div>
<my-form />
</div>
`
});
app.component("my-form", { methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<input />
<span @click="myClick">
<slot>默认提交按钮</slot>
</span>
</div>
`
});

指定插槽的默认内容很简单,在子组件的 slot 标签中间, 写上默认内容即可,当父组件不指定插槽内容时,则使用该内容作为插槽内容

2.7 具名插槽

如果子组件分为 header、main、footer 3个部分,header 和 footer 由父组件决定,header 放在 main 的上方, footer 放在 main 组件的下方,该如何做呢,看下面的例子

    const app = Vue.createApp({
data() {
return {
buttonName : '提交'
}
},
template:`
<div>
<my-html>
<template v-slot:header>
<div>header</div>
</template>
<template v-slot:footer>
<div>footer</div>
</template>
</my-html>
</div>
`
}); app.component("my-html", { methods:{
myClick() {
alert('提交');
}
},
template: `
<div>
<slot name="header" />
<div>main</div>
<slot name="footer" />
</div>
`
});

首先,父组件使用子组件时,使用 template 标签包住 header 的内容,在 template 标签中使用 v-slot:header 为该部分插槽命名。

子组件中,使用 <slot name="header" /> 指定插槽的位置。

footer 部分类似

3. 综述

今天聊了一下 VUE3 的 插槽的使用,希望可以对大家的工作有所帮助,下一节我们继续讲组件的相关知识,敬请期待

欢迎帮忙点赞、评论、转发、加关注 :)

关注追风人聊Java,每天更新Java干货。

4. 个人公众号

追风人聊Java,欢迎大家关注

VUE3 之 插槽的使用 - 这个系列的教程通俗易懂,适合新手的更多相关文章

  1. VUE3 之 作用域插槽 - 这个系列的教程通俗易懂,适合新手

    1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...

  2. VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很大,就像跑马拉松比赛,由于时间长.距离长,很多选手都会选择在中途放弃. 其实有个好办法,就是拆分,把大目标拆分 ...

  3. VUE3 之 动态组件 - 这个系列的教程通俗易懂,适合新手

    1. 概述 暗示效应告诉我们: 巧妙的暗示会在不知不觉中剥夺我们的判断力,对我们的思维形成一定的影响,造成我们行为的些许改变或者偏差. 例如你的朋友说你脸色不太好,是不是病了,此时,你可能就会感觉浑身 ...

  4. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

  5. VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂,适合新手

    1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...

  6. VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂,适合新手

    1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...

  7. VUE3 之 使用标签实现动画与过渡效果(下) - 这个系列的教程通俗易懂,适合新手

    1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...

  8. VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...

  9. VUE3 之 列表动画 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

随机推荐

  1. 【LeetCode】980. Unique Paths III解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 回溯法 日期 题目地址:https://leetco ...

  2. 【LeetCode】306. Additive Number 解题报告(Python)

    [LeetCode]306. Additive Number 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http: ...

  3. idea使用教程-安装

    [1]将安装包进行解压-->选择固态盘符 [2]发送到桌面快捷方式,生成一个快捷方式 [3]打开: 选择主题: 先进入再说,免费试用: 创建一个项目: 选择JDK: 找到jetbrains-ag ...

  4. 【C++】关于new分配空间

    1如果不使用new,则在函数结束时内存被回收,指针变成野指针 #include <iostream> using namespace std; struct Node { int val; ...

  5. Java程序设计基础笔记 • 【第6章 循环结构进阶】

    全部章节   >>>> 本章目录 6.1 for循环 6.1.1 for循环的简介 6.1.2 for循环的使用 6.1.3 for循环的表达式 6.1.4 实践练习 6.2 ...

  6. 编写Java程序,使用菜单组件制作一个记事本编辑器

    返回本章节 返回作业目录 需求说明: 使用菜单组件制作一个记事本编辑器 实现思路: 创建记事本菜单工具栏JMenuBar. 创建多个菜单条JMenu. 创建多个菜单项JMenuItem. 将菜单添加至 ...

  7. 十一、Docker搭建部署SpringCloud微服务项目Demo

    环境介绍 技术选型:SpringCloud&SpringCloud Alibaba&Docker 微服务模块划分: 员工模块:ems-employees 部门模块:ems-depart ...

  8. kubernetes运行应用1之Deployment

    run 或create deployment 部署一个应用 kubernetes 部署 nginx ,使用 kubectl get deployment 时出现 No resources found ...

  9. VMware客户端vSphere Web Client新建虚拟机

    1.说明 vSphere Web Client是为管理员提供的一款通用的. 基于浏览器的VMware管理工具, 能够监控并管理VMware基础设施. 由于需要登录的宿主机安装的是ESXi-6.5.0, ...

  10. Android 悬浮窗 System Alert Window

    悬浮窗能显示在其他应用上方.桌面系统例如Windows,macOS,Ubuntu,打开的程序能以窗口形式显示在屏幕上. 受限于屏幕大小,安卓系统中主要使用多任务切换的方式和分屏的方式.视频播放,视频对 ...