当前位置：首页 > news >正文

vue学习八

news 来源：原创 2025/8/11 11:42:53

十七组件通信方式

1 props

父传子

//父组件
<script setup>//book来源省略import Subview1 from './Subview1.vue';function updatebook(updatetimes){book.value.updatetimes = updatetimes}
</script>
<template><Subview1 :book="book" :updatebook=updatebook></Subview1>
</template>//子组件
<script setup>import { ref } from 'vue'let updatetimes = ref(0)//修改次数defineProps(['book','updatebook'])
</script>
<template><p>{{ book }}</p><p><button @click="updatebook(updatetimes)">updateprice</button> </p>
</template>

点击updateprice前

点击updateprice后

例子中列表来源于mockjs，点击详细这则设置book为选中的列表中对应位置的值，图里选中的是第一个。

点击详细后，父组件将book传给子组件。

点击updateprice后，子组件将其定义的变量updatetimes传给父组件。

父组件传给子组件，依靠子组件 defineProps设置的变量。

子组件传给父组件，依靠子组件 defineProps设置的方法，该方法体在父组件中设置。

2 自定义事件

用于子向父传数据。

子组件使用defineEmits定义事件，使用emit()触发事件。

父组件对于定义的事件绑定相应方法

//父组件
<script setup>
//list book 来源省略
function updatebook2(book){//修改父组件list中的值list[list_index]= book
} 
</script>
<template><Subview1 :book="book" :updatebook="updatebook" @update:book="updatebook2"></Subview1> 
</template>//子组件
<script setup>
import { ref } from 'vue'
let updatetimes = ref(0)//修改次数
defineProps(['book','updatebook'])
//定义事件
let emit = defineEmits(['update:book'])
//修改价格
function updateprice(book){book.price = book.price + 1updatetimes.value++book.updatetimes = updatetimesemit('update:book',book)
}
</script>
<template><p><button @click="updateprice(book)">updateprice</button> </p>
</template>

点击修改前

点击两次修改后

子组件定义事件，可随时设置事件调用。

父组件设置子组件事件绑定的对应回调。

子组件事件触发后，会执行父类定义的回调。

官方推荐：

父组件中可以使用 kebab-case 形式来监听。

实际就是例子中update:book变成update-book。

组件中自定义事件也支持修饰符。

组件触发的事件没有冒泡机制，只能监听直接子组件触发的事件，即平级的和跨层的emit监听不到。

3 mitt

可实现任意组件通信。

流程：定义事件并绑定操作->中间件做事件管理->触发事件触发对应操作。

定义：项目名\src\utils\emitter.js

import mitt from "mitt"
const emitter = mitt()export default emitter

父组件

<script setup> 
……
import Subview1 from './Subview1.vue';
import Subview2 from './Subview2.vue';
……
function updatebook2(book){list[list_index]= book
} 
</script>
<template><div class="main"><h1>View 10</h1><h3>books</h3><div v-for="item in list" :key="item.id" class="book_item"><div class="img"> <img :src="item.cover" alt="item.name"></div><div class="info">   <p>name:{{ item.name }}</p><p>price:{{item.price}}</p></div><div><button @click="showbook(item.id)">详细</button>  </div></div><div class="sub" v-show="book"><Subview1 :book="book" :updatebook="updatebook" @update:book="updatebook2"></Subview1> </div><div class="sub"><Subview2></Subview2></div></div>
</template>

Subview1

<script setup>
import { ref } from 'vue'
import mitt from '@/utils/emitter.js';
let updatetimes = ref(0)//修改次数
defineProps(['book','updatebook'])
let emit = defineEmits(['update:book'])
//修改价格
function updateprice(book){book.price = book.price + 1updatetimes.value++book.updatetimes = updatetimesemit('update:book',book)
}
</script>
<template><div ><h2>Subview1</h2><p>{{ book }}</p><p>updatetimes:{{updatetimes}}</p><!-- <p><button @click="updatebook(updatetimes)">updateprice</button> </p> --><p><button @click="updateprice(book)">updateprice</button>&nbsp;<button @click="mitt.emit('buy-book',book)">buybook</button> </p></div>
</template>  
<style scoped>
</style>

Subview2

<script setup>
import { reactive } from 'vue'
import mitt from '@/utils/emitter.js';
let buybooks =reactive([])
mitt.on('buy-book',(book)=>{let hasbook =falsefor (var value of buybooks) {if(value.id===book.id){value.num++;hasbook = true;break;}}if(!hasbook){book.num=1;buybooks.push(book)}
})</script>
<template><div ><h2>Subview2</h2><div v-show="buybooks.length>0"><p>buy books</p><div v-for="(item,key) in buybooks" :key="key"><!-- {{key}} -->{{ item.name }}&nbsp;&nbsp;{{ item.num }}x{{item.price}} = {{item.price*item.num}} </div></div></div> 
</template>

根据样例，父类展示两个子类，子类中引用mitt定义文件。

Subview1中触发事件，需要defineEmits定义事件名，使用mitte.emit(时间名，参数)调用。

Subview2中接收事件，使用mitt.on(事件名，回调)。

调用mitt.on()后最好再调用mitt.off()进行解绑。

onUnmounted(()=>{mitt.off(事件名)
})

上图为点击一次buybook效果。

上图为点击一次updateprice之后再点击一次buybook效果。

4 v-model

用与变量双向绑定。

<script setup>
……
let book =ref(false)
……
function inputaction($event){book.value.name = $event.target.value
}
function inputaction1(a,$event){book.value.name = a+"_"+$event.target.value
}
</script>
<template><div>book：<input type="text" :value="book.name" @input="inputaction"><br>book: <input type="text" v-model="book.name"><br>book：<input type="text" :value="book.name" @input="inputaction1(1,$event)"></div>
</template>

例子中input两种帮定效果一样。

原始方式就是绑定变量（此时是单向绑定）之后，再绑定方法（此时是双向绑定）用于修改变量。

v-model命令直接可以双向绑定变量。

绑定事件不设置参数时参数默认$event，设置参数时传递$event需要写在参数列表中。

使用在组件中就是实现组件通信，跨组件变量的双向绑定。

若不使用v-model就是在组件中设置props和emits：

//父组件
<Subview :bookname="book.name" @update:bookname="book.name=$event"></Subview>//子组件
defineProps(["bookname"])
defineEmits(["update:bookname"])<input type="text" :value="bookname" @input="$emit('update:bookname',$event.target.value)">

使用v-model后：

//父类
<Subview2 v-model="book.price"></Subview2>//子类
defineProps(["modelValue"])
defineEmits(["update:modelValue"])bookprice:<input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)">

子组件中modelValue和update:modelValue是固定的。

5.definemodel

vue3.4提供的宏definemodel，可以简化v-model中组件的代码。

父组件

<Subview1 v-model="book.name" v-model:bookprice="book.price"></Subview1>

子组件

let [bookname] = defineModel()  
let bookprice = defineModel("bookprice")
function changename($event){bookprice.value =$event.target.value
} <input type="text" :value="bookprice" @input="changename">

父附件可以设置多个v-model，子组件可以解构defineModel或者直接使用。

defineModel生命一个model prop，所以修改方法和prop一样。

6 $attrs

用于当前组件的父组件和子组件传数据。

父组件传给子组件的参数中，若子组件未接收，则存在$attrs。

可以将$attrs传给子组件，子组件再接收。

父类

let test=ref("test")<Subview2 :bookname="book.name" :test="test"></Subview2>

子类

//Subview2defineProps(["bookname"])<Subview3 v-bind="$attrs"></Subview3>    //Subview3<script setup> 
defineProps(["test"])
</script><template><h3>Subview3</h3><p>test: {{ test }}</p>
</template>

6 $refs

用于获取和修改子组件暴露的数据。

子组件需要使用defineExpose暴露变量。

父组件在子组件上设置ref，用于$refs获取。

父组件

function add_updatetimes(values){console.log(values)console.log(values['sub1'].updatetimes)values['sub1'].updatetimes+=1
}<button @click="add_updatetimes($refs)">add updatetimes</button><Subview1 ref="sub1"></Subview1>

子组件

let updatetimes = ref(0)
defineExpose({updatetimes})<p>updatetimes:{{updatetimes}}</p>

console输出

点击add updatetimes 后

一个父组件可以有多个子组件。

7 $parent

用于子组件获取和修改父组件暴露的数据。

父组件暴露数据后，子组件通过$parent获取和修改。

父组件

let test=ref("test")
defineExpose({test})

子组件

function updatetest(parent){console.log(parent)parent.test = "subview1"
}<button @click="updatetest($parent)">update test</button>

console输出

一个子组件只能由一个父组件，即只能获取最直接的调用其的父附件。

跨组件调用$parent获取不到对应数据。

8 inject&provide

父组件通过provide向之后的子组件传递数据，可跨组件。

子组件通过inject获取父组件传递的数据，可跨组件。

父组件在设置provide，可设置方法，在子组件中可通过改方法向父组件通讯。

父组件

let test1=ref("test1")
function changetest(value){test1.value+="."+value
}
provide("view10_test",{test1,changetest})

子组件

let {test1,changetest} = inject("view10_test","默认值")<p>test1: {{ test1 }}
</p><button @click="changetest('new test')" >change test</button>

点击change test后

vue学习八

十七组件通信方式 1 props 父传子 //父组件 <script setup>//book来源省略import Subview1 from ./Subview1.vue;function updatebook(updatetimes){book.value.updatetimes updatetimes} </script> <template><Subview1 :book"book" :upd…...

编程日记 2025/8/11 11:42:53

Vue 渲染 LaTeX 公式 Markdown 库

🌟 前言欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...

编程日记 2025/8/10 4:18:16

基于大模型的喉癌全程预测与治疗方案优化研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的与目标 1.3 研究方法与数据来源二、大模型在喉癌预测中的应用原理 2.1 大模型概述 2.2 预测喉癌的技术原理 2.3 相关技术对比三、术前预测与方案制定 3.1 术前风险预测 3.1.1 淋巴结转移预测 3.1.2 其他风险因素预…...

编程日记 2025/8/7 0:00:24

SpringBoot第三站：配置嵌入式服务器使用外置的Servlet容器

目录 1. 配置嵌入式服务器 1.1 如何定制和修改Servlet容器的相关配置 1.server.port8080 2. server.context-path/tx 3. server.tomcat.uri-encodingUTF-8 1.2 注册Servlet三大组件【Servlet，Filter，Listener】 1. servlet 2. filter 3. 监听器…...

编程日记 2025/8/11 11:32:20

通向AGI的未来之路！首篇2D/视频/3D/4D统一生成框架全景综述(港科大中山等)

文章链接： https://arxiv.org/pdf/2503.04641 摘要理解并复现现实世界是人工通用智能（AGI）研究中的一个关键挑战。为实现这一目标，许多现有方法（例如世界模型）旨在捕捉支配物理世界的基本原理&#xff0…...

编程日记 2025/8/8 8:50:16

什么是MCP（Model Context Protocol）？对话、意图识别、服务调用和上下文管理

什么是MCP？ MCP（Model Context Protocol） 是一种专为人工智能模型设计的通信协议，旨在解决复杂 AI 系统中多个模型或组件之间的协同、状态管理和资源优化问题。它尤其适用于大型语言模型（LLM）、多模态系统及…...

编程日记 2025/8/11 11:41:18

第二十七篇数据仓库与维度建模指南：从理论到实战的进阶之路

声明：文章内容仅供参考，需仔细甄别。文中技术名称属相关方商标，仅作技术描述；代码示例为交流学习用途，部分参考开源文档（Apache 2.0/GPLv3）；案例数据已脱敏，技术推荐保持…...

编程日记 2025/8/5 23:59:53

定时任务引起的死锁

定时任务引起的死锁前言：Java面试题死锁的场景有哪些？你们是怎么解决的？ 锁有哪些特性？ 问题现象 1，文件上传报当前功能正在使用，请稍后再试 2，其他账号登录系统，登录不上去&a…...

编程日记 2025/8/8 12:05:57

NewStar CTF web wp

文章目录 week1headach3会赢吗智械危机谢谢皮蛋PangBai 过家家（1） week3include meblindsql1臭皮的计算机臭皮踩踩背这照片是你吗 week4Pangbai过家家四blindsql2chocolateezcmsssezpollute隐藏的密码 weeek5pangbai过家家(5)redissqlshell臭皮吹泡泡臭皮…...

编程日记 2025/8/8 21:00:44

Docker运行postgreSQL，由于异常启动或者退出后，提示could not locate a valid checkpoint record

pg_resetwal 是 PostgreSQL 的“急救工具”，用于在极端情况下修复因 WAL 或控制文件损坏导致的启动问题。但需注意： 风险极高，可能导致数据不一致。必须立即转储并恢复，避免直接在修复后的数据库中执行写操作。仅在备份后使用&…...

编程日记 2025/8/9 13:09:14

Leetcode 刷题笔记1 图论part01

图论的基础知识： 图的种类： 有向图（边有方向） 、无向图（边无方向）、加权有向图（边有方向和权值） 度： 无向图中几条边连接该节点，该节点就有几度&#xff1…...

编程日记 2025/8/6 23:35:49

文件管理系统

前言：之前我们讨论的是被打开文件的管理，那么未被打开的文件是如何管理的呢？ 1.认识磁盘设备 1.1磁盘的物理结构磁盘是由盘片（盘面，扇区，磁道，柱面），磁头&#xff0c…...

编程日记 2025/8/3 21:22:19

荣耀手机卸载应用商店、快应用中心等系统自带的

1.下载abd ADB Download - Get the latest version of ADB and fastboot 2.手机打开开发者选项 3.手机接电脑打开USB调试 4.下载MT管理器查看系统包名 D:\1.LFD\ADB\platform-tools-latest-windows\platform-tools>adb shell adb.exe: no devices/emulators found 这边是…...

编程日记 2025/8/11 11:41:19

结合基于标签置信度的特征选择方法用于部分多标签学习-简介版

假设部分多标签学习（PML）假设：假设样本的标签集合中存在伪正标签，即某些标签可能是错误的。目标是从候选标签集中识别出真实标签。特征与标签的关系假设：假设不同的标签对应的特征子空间可能是不同的，而不…...

编程日记 2025/8/8 5:59:54

【小白向】Word｜Word怎么给公式标号、调整公式字体和花括号对齐

【小白向】Word｜Word怎么给公式标号、调整公式字体和花括号对齐我的版本：Word 2021 如需快速查看关键步骤，请直接阅读标红部分。如果遇到无法调整的情况，可以直接下载我的示例文档进行参考：花括号和其他的示例公式.…...

编程日记 2025/8/5 1:37:40

基于香橙派 KunpengPro学习CANN(2)——Ascend Extension for PyTorch 配置与安装

将 PyTorch 网络迁移到昇腾平台并执行训练或推理，直接使用昇腾提供的构图接口构图。Ascend Extension for PyTorch插件用于适配PyTorch框架，可以使用昇腾AI处理器的算力。 1 pip 安装 # 下载PyTorch安装包 wget https://download.pytorch.org/whl/cpu/…...

编程日记 2025/8/11 10:16:17

【备赛】遇到的小问题-1

问题描述-1 想实现的功能是，通过ADC实时测量某引脚的电压及其占空比。可以通过旋转电位器，更改其电压。首先我定义了这几个变量 uint32_t adc_value;//HAL库函数里面得出的采样值(实时更新) uint32_t percentage6;//占空比，随着adc_val…...

编程日记 2025/8/6 5:00:25

Browser Use的安装和使用

文章目录一、介绍二、安装教程1、使用Conda创建虚拟环境2、激活环境3、安装browser use4、安装Playwright5、克隆git仓库6、安装项目的依赖三、使用教程1、启动WebUI2、案例13、案例2 一、介绍背景 Browser Use：用AI控制你的浏览器，你可以使用它帮你…...

编程日记 2025/8/6 22:33:44

碰一碰发视频saas系统技术源头一站式开发文档

碰一碰发视频系统技术源头一站式开发文档一、引言在数字化信息传播高速发展的当下，如何让视频分享更便捷、高效，成为商家和开发者们关注的焦点。“碰一碰发视频”系统以其独特的交互方式和强大的功能优势，为视频分享领域带来了革命性变革。…...

编程日记 2025/8/11 10:48:32

Spring Boot 静态访问配置属性的解决方案

前言在Spring Boot开发中，静态访问配置信息是一个常见需求，尤其是在工具类、常量类或非Bean类中直接获取配置值。问题背景假设我们的应用需要从application.yml中读取配置项app.logotype，并在工具类、静态方法或非Bean类中直接访问该值。…...

编程日记 2025/8/8 12:43:22

NLP高频面试题（四）——BN和LN的区别与联系，为什么attention要用LN

在深度学习模型中，Normalization是一种极为重要的技巧，Batch Normalization（BN）和Layer Normalization（LN）是其中最为常用的两种方法。然而，二者在实际应用中有着明显的区别与联系，尤…...

编程日记 2025/8/7 21:32:39

深度学习定义与分类【详细易懂初学者友好~】

深度学习（Deep Learning）是机器学习的一个子领域，它基于人工神经网络（Artificial Neural Networks，ANN）的理论和架构，通过构建多层（即“深度”）的神经网络结构来学习数据…...

编程日记 2025/8/6 15:53:57

二、小白学JAVA-认识数据类型【变量】

1、实际案例类比初中以上数学，就知道有有理数、正数、负数、0、小数、大写的数字、语文。 2、数据类型介绍 public class Main {public static void main(String[] args) {// 数据类型byte i_byte 12; // 标识数据范围小，但是节省内存>网络传输…...

编程日记 2025/8/2 18:54:06

UNI-APP uts插件支持ANDROID 监听手机状态

插件地址 https://ext.dcloud.net.cn/plugin?id22646 模块 import {startPhoneListener,stopPhoneListener,checkIsAutoRecord,toCallAutoRecorderPage,navigateToCallRecordingSettings,jumpToPermissionPage,makePhoneCall,allRecorderFilesAction,registerSmsReceiver,} f…...

编程日记 2025/8/9 10:16:26

十七 组件通信方式