Vue3:通信组件

1.Props

父传子：直接传递需要获取的属性

子传父：需要借助函数，也就是方法，通过传递函数，子接着入参给函数，父调用函数即可获取到参数。

父：

<template><div class="father"><h3>父组件</h3><h4>汽车：{{ car }}</h4><h4 v-show="toy">儿子给的玩具：{{ toy }}</h4><Child :car="car" :sendToy="getToy" /></div>
</template><script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from 'vue';let car = ref('奔驰')
let toy = ref('')function getToy(value: string) {console.log(value)toy.value = value
}
</script>

子：

<template><div class="child"><h3>子组件</h3><h4>玩具：{{ toy }}</h4><h4>父亲给的汽车：{{ car }}</h4><button @click="sendToy(toy)">给父亲玩具</button></div>
</template><script setup lang="ts" name="Child">import { ref } from 'vue';let toy = ref('奥特曼')defineProps(['car', 'sendToy'])
</script>

2.自定义事件

使用@,声明一个自定义事件，并绑定一个函数，传递给子子组件通过接收该自定义事件，

     <!-- 自定义事件 --><Child  @send-toy="saveToy" />

 子接收自定义时间，并绑定点击事件，通过入参，实现数据的传递

let emit = defineEmits(['send-toy'])
    <button @click="emit('send-toy',toy)">传递玩具给父亲</button>

3.mitt（绑定-订阅接收）任意组件消息传递（类似于RabbitMQ）

import mitt from 'mitt'
import { ref } from 'vue'let emitter = mitt()let num = ref(0)// 绑定事件
emitter.on('add', () => {console.log('add被调用了', num)
})
// 每隔1秒执行事件
setInterval(() => {emitter.emit('add')
}, 1000)setTimeout(() => {// 解绑事件emitter.off('add')
}, 5000)export default emitter

接收数据，需要绑定事件，也就是订阅。避免内存溢出，组件卸载之后，解绑事件

let food = ref('')
emitter.on('send-food', (value: string) => {food.value = value
})onUnmounted(() => {emitter.off('send-food')
})

发送数据，需要执行事件

     <button @click="emitter.emit('send-food', food)">分享食物给弟弟</button>

4.v-model,一般用于UI库的底层实现

例如el input 输入框，底层编写了输入框组件，并且通过v-model实现数据的双向绑定

5.$attrs

父组件向子组件传递数据，attrs存储的是被defineProps接收的值，可以通过$attrs获取

<Child :car="car" :sendToy="getToy" @send-toy="saveToy" :a="a" :b="b" :updateA="updateA"/>
defineProps(['car', 'sendToy'])
   <h4>attrs:a:{{ $attrs.a }}</h4><h4>attrs:b:{{ $attrs.b }}</h4><button @click="$attrs.updateA(6)">修改a</button>

6.$refs，$parent

都需要集合defineExpose,将需要传递的数暴露出去

$refs :子传父

 <button @click="addBook($refs)">给孩子买书</button><Child ref="c1" />let c1 = ref()
function updateA(value: number) {a.value += value
}
defineExpose({book})

$parent:父传子

defineExpose({ house })
<button @click="minusHouse($parent)">得到父亲的一套房子</button>function minusHouse(parent:any){console.log(parent)parent.house -=1
}

7.provide（提供数据）、inject（接收数据）

let money = ref(100)
provide('moneyContext',{money,updateMoney})
    <h4>父亲的钱：{{ money }}</h4><button @click="updateMoney(6)">花父亲的钱</button>let { money, updateMoney } = inject('moneyContext', { money: 55, updateMoney: (value: number) => { } })

8.插槽slot

8.1 默认插槽

引入子组件，组间标签内编写内容

在子组件，使用<slot>j进行占位

<template><div class="father"><h2>父组件</h2><div class="content"><Child title="今日游戏列表"><ul><li v-for=" (item, index) in games" :key="index">{{ item }}</li></ul></Child><Child title="今日美食推荐"><img :src="imgUrl"></Child><Child title="今日影视推荐"><video :src="videoUrl" controls /></Child></div></div></template><script>
export default {name: 'Father'
}</script>
<script setup>
import Child from './Child.vue';
import { ref, reactive } from 'vue';let games = reactive(['王者荣耀','绝地求生','天天酷跑'
])let imgUrl = ref('http://47.113.201.132:9001/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL215bGlmZS8yMDI0LzA4LzE2L2NkNjY3YWY2YzAxMzRiNmZhZGZhMTMwZjk4NGQ0MGUxLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPVNVTEdOWTY3RVpFMFoyVVZNVTFUJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDAxNTEzNVomWC1BbXotRXhwaXJlcz00MzE5NiZYLUFtei1TZWN1cml0eS1Ub2tlbj1leUpoYkdjaU9pSklVelV4TWlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKaFkyTmxjM05MWlhraU9pSlRWVXhIVGxrMk4wVmFSVEJhTWxWV1RWVXhWQ0lzSW1WNGNDSTZNVGN5TlRBeU5UZ3lOQ3dpY0dGeVpXNTBJam9pY205dmRDSjkuOElYdU9CR2w3V2p5QWR5LUpoSVRMQml5dmJTRmhHM3lLNmZpUWE3RS1aaHQzV3o3TkdsMzdGUjlTal90aXdLNk4ySmxtcUhRNmtSQmxtODVzajNUa2cmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnZlcnNpb25JZD1udWxsJlgtQW16LVNpZ25hdHVyZT0xNjE5NmViYzcwZTM2MDkxNDQ4Y2ZmMmMzYTc3ODY4NzZmZTllNDhmYTZkMGQ5Y2JkMmU4NzE2NmM3MDQ4YWQw')let videoUrl = ref('http://vjs.zencdn.net/v/oceans.mp4')
</script><style scoped>
.father {background-color: antiquewhite;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;
}.content {display: flex;justify-content: space-evenly;
}img,
video {width: 90%;
}
</style>
<template><div class="child"><h2>{{ title }}</h2><slot></slot></div>
</template><script>
export default {name: 'Child'
}
</script><script setup>
defineProps(['title'])
</script><style scoped>
.child {background-color: aquamarine;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;width: 200px;height: 300px;
}h2 {background-color: yellow;text-align: center;}
</style>

8.2 具名插槽：使用多个插槽，填充不同的内容

数据在父组件，结构也在父组件，填充的位置由子组件定义。

<template><div class="father"><h2>父组件</h2><div class="content"><Child><template v-slot:s1><h2>今日游戏列表</h2></template><template v-slot:s2><ul><li v-for=" (item, index) in games" :key="index">{{ item }}</li></ul></template></Child><Child><template v-slot:s1><h2>今日美食推荐</h2></template><template v-slot:s2><img :src="imgUrl"></template></Child><Child><template #s1><h2>今日影视推荐</h2></template><template #s2><video :src="videoUrl" controls /></template></Child></div></div></template><script>
export default {name: 'Father'
}</script>
<script setup>
import Child from './Child.vue';
import { ref, reactive } from 'vue';let games = reactive(['王者荣耀','绝地求生','天天酷跑'
])let imgUrl = ref('http://47.113.201.132:9001/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL215bGlmZS8yMDI0LzA4LzE2L2NkNjY3YWY2YzAxMzRiNmZhZGZhMTMwZjk4NGQ0MGUxLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPVNVTEdOWTY3RVpFMFoyVVZNVTFUJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDAxNTEzNVomWC1BbXotRXhwaXJlcz00MzE5NiZYLUFtei1TZWN1cml0eS1Ub2tlbj1leUpoYkdjaU9pSklVelV4TWlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKaFkyTmxjM05MWlhraU9pSlRWVXhIVGxrMk4wVmFSVEJhTWxWV1RWVXhWQ0lzSW1WNGNDSTZNVGN5TlRBeU5UZ3lOQ3dpY0dGeVpXNTBJam9pY205dmRDSjkuOElYdU9CR2w3V2p5QWR5LUpoSVRMQml5dmJTRmhHM3lLNmZpUWE3RS1aaHQzV3o3TkdsMzdGUjlTal90aXdLNk4ySmxtcUhRNmtSQmxtODVzajNUa2cmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnZlcnNpb25JZD1udWxsJlgtQW16LVNpZ25hdHVyZT0xNjE5NmViYzcwZTM2MDkxNDQ4Y2ZmMmMzYTc3ODY4NzZmZTllNDhmYTZkMGQ5Y2JkMmU4NzE2NmM3MDQ4YWQw')let videoUrl = ref('http://vjs.zencdn.net/v/oceans.mp4')
</script><style scoped>
h2 {background-color: yellow;text-align: center;}.father {background-color: antiquewhite;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;
}.content {display: flex;justify-content: space-evenly;
}img,
video {width: 90%;
}
</style>
<template><div class="child"><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot></div>
</template><script>
export default {name: 'Child'
}
</script><script setup>
</script><style scoped>
.child {background-color: aquamarine;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;width: 200px;height: 300px;
}
</style>

8.3 作用域插槽

数据在子组件，结构在父组件，需要传递数据给父组件

<template><div class="father"><h2>父组件</h2><div class="content"><Child1><template v-slot:s1><h2>今日游戏列表</h2></template><template v-slot="params"><span>{{ params }}</span><ul><li v-for="item in params.youxi" :key="item.id">{{ item.name }}</li></ul></template></Child1><Child1><template v-slot:s1><h2>今日游戏列表</h2></template><template #default="params"><span>{{ params }}</span><ol><li v-for="item in params.youxi" :key="item.id">{{ item.name }}</li></ol></template></Child1></div></div></template><script>
export default {name: 'Father'
}</script>
<script setup>
import { ref, reactive } from 'vue';
import Child1 from './Child1.vue';let games = reactive(['王者荣耀','绝地求生','天天酷跑'
])let imgUrl = ref('http://47.113.201.132:9001/api/v1/download-shared-object/aHR0cDovLzEyNy4wLjAuMTo5MDAwL215bGlmZS8yMDI0LzA4LzE2L2NkNjY3YWY2YzAxMzRiNmZhZGZhMTMwZjk4NGQ0MGUxLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPVNVTEdOWTY3RVpFMFoyVVZNVTFUJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDAxNTEzNVomWC1BbXotRXhwaXJlcz00MzE5NiZYLUFtei1TZWN1cml0eS1Ub2tlbj1leUpoYkdjaU9pSklVelV4TWlJc0luUjVjQ0k2SWtwWFZDSjkuZXlKaFkyTmxjM05MWlhraU9pSlRWVXhIVGxrMk4wVmFSVEJhTWxWV1RWVXhWQ0lzSW1WNGNDSTZNVGN5TlRBeU5UZ3lOQ3dpY0dGeVpXNTBJam9pY205dmRDSjkuOElYdU9CR2w3V2p5QWR5LUpoSVRMQml5dmJTRmhHM3lLNmZpUWE3RS1aaHQzV3o3TkdsMzdGUjlTal90aXdLNk4ySmxtcUhRNmtSQmxtODVzajNUa2cmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JnZlcnNpb25JZD1udWxsJlgtQW16LVNpZ25hdHVyZT0xNjE5NmViYzcwZTM2MDkxNDQ4Y2ZmMmMzYTc3ODY4NzZmZTllNDhmYTZkMGQ5Y2JkMmU4NzE2NmM3MDQ4YWQw')let videoUrl = ref('http://vjs.zencdn.net/v/oceans.mp4')
</script><style scoped>
h2 {background-color: yellow;text-align: center;}.father {background-color: antiquewhite;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;
}.content {display: flex;justify-content: space-evenly;
}img,
video {width: 90%;
}
</style>
<template><div class="child1"><slot name="s1"></slot><slot :youxi="games"></slot></div></template><script lang="ts" setup name="Child1">
import { reactive } from 'vue';let games = reactive([{id: 111,name: "王者荣耀"},{id: 2222,name: "QQ飞车"},{id: 333,name: "斗地主"}
])
</script><style scoped>
.child1 {background-color: aquamarine;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;width: 200px;height: 300px;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/414198.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python破解[5分钟解决拼多多商家后台字体加密]

python破解[5分钟解决拼多多商家后台字体加密]

可【QQ群】拿源码 进入经营总览想把数据存下来发现返回的json数据部分空白如下 这可怎么办 稳住应该是字体的问题&#xff0c;可能是多多自己实现了某种字体&#xff0c;我们去找他的js 发现如我们所想&#xff0c;进行跟踪&#xff0c;发现的确是在css端进行了字体替换&am…
阅读更多...
【高阶数据结构】图的应用--最小生成树

【高阶数据结构】图的应用--最小生成树

一、最小生成树 连通图中的每一棵生成树&#xff0c;都是原图的一个极大无环子图&#xff0c;即&#xff1a;从其中删去任何一条边&#xff0c;生成树就不在连通&#xff1b;反之&#xff0c;在其中引入任何一条新边&#xff0c;都会形成一条回路。 若连通图由n个顶点组成&am…
阅读更多...
华为云征文|基于Flexus云服务器X实例的应用场景-部署脚手架开源项目若依

华为云征文|基于Flexus云服务器X实例的应用场景-部署脚手架开源项目若依

&#x1f534;大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 先看这里 写在前面**Flexus X实例**的云服务器简介环境准备若依项目拉取导入数据库启动本地项目&#xff08;后端&#xff09;启动本地项目&#xff08;前端&#xff09;打包后…
阅读更多...
Linux——性能调优工具一览

Linux——性能调优工具一览

一、CPU 1.调优工具 根据指标找工具 性能指标工具说明 平均负载 uptime、top uptime最简单、top提供了更全的指标 系统整体CPU使用率 vmstat、mpstat、top、sar、/proc/stat top、vmstat、mpstat只可以动态查看&#xff0c;而sar还可以记录历史数据 /proc/stat是其他性…
阅读更多...
【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

昨天写了一篇文章&#xff0c;使用fastapi直接操作neo4j图数据库插入数据的例子&#xff0c; 本文实现LLM大模型结合neo4j图数据库实现AI问答功能。 废话不多说&#xff0c;先上代码 import gradio as gr from fastapi import FastAPI, HTTPException, Request from pydantic…
阅读更多...
HarmonyOS开发实战（ Beta5版）耗时分析器Time Profiler实践指导

HarmonyOS开发实战（ Beta5版）耗时分析器Time Profiler实践指导

DevEco Studio集成的DevEco Profiler性能调优工具&#xff08;以下简称为Profiler&#xff09;&#xff0c;提供Time、Allocation、Snapshot、CPU等场景化分析任务类型。开发应用或服务过程中&#xff0c;如果遇到卡顿、加载耗时等性能问题&#xff0c;开发者通常会关注相关函数…
阅读更多...
机器学习周报（8.26-9.1）

机器学习周报（8.26-9.1）

文章目录 摘要Abstractself-attetionQKV理解如何让self-attention更有效local attention/truncated attention方法stride attention方法Global Attention方法data driving方法Clusteringsinkhorn sorting network选取representative keys减少Keys数量的方法self-attentionSynth…
阅读更多...
jQuery库

jQuery库

注明&#xff1a;本文参考自&#xff1a;jQuery - 白月黑羽 (byhy.net) jQuery安装 Download jQuery | jQuery下载到本地 ps: script标签中的src属性&#xff1a;表示包含要执行的代码的外部文件位置 <!DOCTYPE html> <html lang"en"><head><s…
阅读更多...
让自家的智能语音助手实现todo任务的添加

让自家的智能语音助手实现todo任务的添加

我家的树莓派在成为了“智能语音助手”后&#xff0c;经过rasa学习训练&#xff0c;已经可以帮忙查日期/时间&#xff0c;查天气预报&#xff0c;进行一些简单的闲聊。但是&#xff0c;我希望它的功能还可以再强大些&#xff0c;比如说&#xff0c;可以帮我记录todo任务。为了实…
阅读更多...
当网络适配器的Wireless出现感叹号

当网络适配器的Wireless出现感叹号

1.出现如下情况 链接&#xff1a; &#xff1a;一招搞定Intel(R) Wireless-AC 9560显示感叹号&#xff0c;无法打开wifi模块&#xff01;_intel(r)wireless-ac9560感叹号-CSDN博客z 重点&#xff1a; 原因是因为电脑静电的问题。
阅读更多...
生产es所有节点全部掉线 排查

生产es所有节点全部掉线 排查

生产es所有节点全部掉线 查看message日志发现 内存溢出 修改jvm的改小 清理buff/cache sync && echo 1 > /proc/sys/vm/drop_caches sync && echo 2 > /proc/sys/vm/drop_caches sync && echo 3 > /proc/sys/vm/drop_caches 把es内存的…
阅读更多...
Bean 的生命周期

Bean 的生命周期

什么是Bean的生命周期 Bean 的生命周期就是&#xff1a;对象从创建开始到最终销毁的整个过程&#xff0c;Bean 对象从创建到销毁中经历了哪些过程 什么时候创建Bean对象&#xff1f;创建Bean对象的前后会调用什么方法&#xff1f;Bean对象什么时候销毁&#xff1f;Bean对象的销…
阅读更多...
13-springcloud gateway集成nacos实现负载均衡

13-springcloud gateway集成nacos实现负载均衡

网关作为访问系统的入口&#xff0c;负载均衡是必选项而不是可选项&#xff0c;本文介绍gateway与nacos集成&#xff0c;实现负载均衡的过程。关于springcloud gateway的基本用法&#xff0c;同学可以看看上篇文章: 12-使用gateway作为网关。 0、环境 jdk&#xff1a;1.8spri…
阅读更多...
idea插件开发的第一天-写一个小Demo

idea插件开发的第一天-写一个小Demo

介绍 Demo说明 本文基于maven项目开发,idea版本为2022.3以上,jdk为1.8本文在Tools插件之上进行开发 Tools插件说明 Tools插件是一个Idea插件,此插件提供统一Spi规范,极大的降低了idea插件的开发难度,并提供开发者模块,可以极大的为开发者开发此插件提供便利Tools插件安装需…
阅读更多...
LLM系列 | 36：Google最新开源大模型：Gemma 2介绍及其微调(下篇)

LLM系列 | 36：Google最新开源大模型：Gemma 2介绍及其微调(下篇)

引言 环境安装 数据准备 下载 处理 模型训练 模型inference 结果 gemma-2-9b gemma-2-9b-it 引言 低头观落日&#xff0c;引手摘飞星。 小伙伴们好&#xff0c;我是微信公众号《小窗幽记机器学习》的小编&#xff1a;卖黑神话的小女孩。本文紧接前文Google最新开源大…
阅读更多...
栈和队列——用队列实现栈

栈和队列——用队列实现栈

题目中给出&#xff0c;让我们应用两个队列实现栈&#xff0c;首先我们先来想一下&#xff0c;栈是先进后出&#xff0c;队列是先进先出。所以我们就需要应用两个队列来回导才能实现栈的特点。因为这道题是基于队列来实现的&#xff0c;所以在下方若有看不懂的函数名称可以去栈…
阅读更多...
【indirect 函数 ★二级下拉菜单】

【indirect 函数 ★二级下拉菜单】

Indirect 函数 &#x1f33c;indirect函数参数&#x1f33c;应用&#xff1a;&#x1f33c;跨表引用同一单元格&#x1f33c;二级下拉列表 &#x1f33c;indirect函数参数 返回⬅️【文本字符串所指定的引用】 INDIRECT(ref_text,[a1]) 其中【ref_text】是引用的文本 [a1] 是…
阅读更多...
网络安全实训六(靶机实例DC-3)

网络安全实训六(靶机实例DC-3)

1 信息收集 1.1 获取靶机IP 1.2 扫描靶机网站的目录 1.3 扫描端口和服务器信息 1.4 进入网站 1.5 在msf中给搜索joomla扫描器 1.6 设置参数查看joomla版本信息 1.7 按照版本号搜索漏洞 1.8 查看漏洞使用 2 渗透 2.1 查看是否存在SQL注入 2.2 获取到数据库信息 2.3 爆破列表 2…
阅读更多...
盘点java8 stream中隐藏的函数式接口

盘点java8 stream中隐藏的函数式接口

shigen坚持更新文章的博客写手&#xff0c;记录成长&#xff0c;分享认知&#xff0c;留住感动。个人IP&#xff1a;shigen 提到函数式接口&#xff0c;最常见的就是lambda表达式&#xff0c;IDEA也有智能的提示&#xff1a; 最后改成这样的就是最简洁的、IDEA希望的风格&#…
阅读更多...
【我要成为配环境高手】Visual Studio中Qt安装与配置（无伤速通）

【我要成为配环境高手】Visual Studio中Qt安装与配置（无伤速通）

1.下载安装Qt和VSIX插件 2.本地环境变量配置 添加如下&#xff1a; D:\ProgramData\Qt\Qt5.14.2\5.14.2\msvc2017_64\libD:\ProgramData\Qt\Qt5.14.2\5.14.2\msvc2017_64\bin3.VS配置 ⭐项目右键->属性->调试->环境&#xff0c;添加如下&#xff1a;(很重要&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023