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

Vue3组件通信的方式

1、父给子传 — props

父组件

<template><h1></h1><Son :value="number" /><button @click="add">点我加1</button>
</template><script setup>
import Son from './son.vue';import { ref } from 'vue';
let number = ref(0)
const add = () => {number.value++ console.log(number.value);
}
</script><style scoped></style>

子组件

<template><h1>{{ value }}</h1>
</template><script setup>
let a = defineProps(['value'])
console.log(a.value);</script><style scoped></style>

2、子给父传 — 自定义事件

父组件

<template><h1></h1><Son1 @xxx="clickSon1"></Son1>
</template><script setup>
import Son1 from './son1.vue';const clickSon1 = (params) => {console.log('clickSon1', params);
}
</script><style scoped></style>

子组件

<template><h1 @click="clickSon1">1</h1>
</template><script setup>
import { defineEmits } from 'vue';
let emit = defineEmits(['xxx']);const clickSon1 = () => {console.log('clickSon1');emit('xxx', '我是子组件1传递的数据')
}</script><style scoped></style>

3、全局事件总线

首先安装mitt,然后实例化一个对象

import mitt from "mitt";
const $bus = mitt();
export default $bus;

子组件1(发布)

<template>子组件1<button @click="handleClick">子组件1</button>
</template><script setup>
import $bus from './bus/index.js'const handleClick = () => {console.log('子组件1')$bus.emit('a',{b:'123'})
}</script>

子组件2(接收)

<template>子组件2
</template><script setup>
import $bus from './bus/index.js'
console.log($bus);
import { onMounted } from 'vue';onMounted(() => {$bus.on('a', (a) => {console.log(a);})
})
</script>

4、V-model

父组件

<template><h1>父组件</h1>{{ money }}<hr><div><son1 v-model="money"></son1></div><hr><div><son2></son2></div><hr>
</template><script setup>
import son1 from './son1.vue'import { ref } from 'vue';
let money = ref(10000)
</script><style scoped></style>

子组件

<template>子组件1{{ modelValue }}<button @click="handler">点我改变接收到的数据</button>
</template><script setup>
import { defineEmits, defineProps } from 'vue'
const props = defineProps(['modelValue'])
const $emits = defineEmits(['update:modelValue'])
const handler = () => {$emits('update:modelValue', props.modelValue + 1000)
}</script><style scoped></style>

5、useAttrs

父组件

<template><h1>父组件</h1><hr><div><son1 title="标题" content="内容" @click="handleClick"></son1></div>
</template><script setup>
import son1 from './son1.vue'
const handleClick = () => {console.log('点击事件触发')
}
</script><style scoped></style>

子组件

<template>子组件1<div><h2>{{ title }}</h2><p>{{ content }}</p><button @click="onClick">点击</button></div>
</template><script setup>
import { useAttrs } from 'vue'
const { title, content, onClick } = useAttrs()</script><style scoped></style>

6、pinia

6.1、Pinia的理解

  1. 新定义一个仓库
  2. state定义变量,存储相关状态
  3. actions请求接口
  4. getter相当于计算属性,不怎么用
// 仅定义商品模块中的defineStore,用这个来定义一个store
import { defineStore } from "pinia"// 引入接口
import {getAllCommodityMsg,
} from '@/api/shop/shop'// 通过defineStore来定义一个属于商品的仓库store,内部会自动管理store
const shopStore = defineStore('Shop', {// 存储数据的地方state: () => {return {// 请求商品列表所带的参数shopList: {"page_size": '15',"page_num": '1',"desc": true,},// 存放商品所有数据数组commodityMsg: [],// 一共多少条数据total:'',}},// 异步|逻辑|请求数据actions: {// 获取商品列表接口async commodityList(pageNo) {this.shopList.page_num = pageNoconsole.log(this.shopList);let res = await getAllCommodityMsg(this.shopList.page_size,this.shopList.page_num, this.shopList.desc)this.commodityMsg = res.data.datathis.total = res.data.total// console.log(res.data.total);// console.log(res);console.log(this.commodityMsg);},},
})// 对外暴露
export default shopStore;

相关文章:

Vue3组件通信的方式

1、父给子传 — props 父组件 <template><h1>父</h1><Son :value"number" /><button click"add">点我加1</button> </template><script setup> import Son from ./son.vue;import { ref } from vue; le…...

双场板功率型GaN HEMT中用于精确开关行为的电容建模

来源:Capacitance Modeling in Dual Field-Plate Power GaN HEMT for Accurate Switching Behavior (TED 16年) 摘要 本文提出了一种基于表面电势的紧凑模型&#xff0c;用于描述具有栅极和源极场板&#xff08;FP&#xff09;结构的AlGaN/GaN高电子迁移率晶体管&#xff08;…...

UE4_AI_行为树_行为树快速入门指南

声明&#xff1a;学习笔记。 在 行为树快速入门指南 中&#xff0c;你将学会如何创建一个敌方AI&#xff0c;该AI看到玩家后会做出反应并展开追逐。当玩家离开视线后&#xff0c;AI将在几秒钟后&#xff08;这可根据你的需求进行调整&#xff09;放弃追逐&#xff0c;并在场景中…...

c++ 面试100个题目中的编程题目

88、下列程序的运行结果是? #include <stdlib.h> #include <stdio.h> #include <string.h> #include <iostream> const char* str = "vermeer"; using namespace std; int main(){ const char* pstr = str;cout << "The add…...

C++初阶:类与对象(尾篇)

目录 1. 构造函数与初始化列表1.1 对象的创建与构造函数的初始化1.2 初始化列表及构造函数存在的意义1.3 explicit关键字与构造函数的类型转换 2. static成员变量与static成员函数2.1 static成员变量2.2 static成员函数 3. 日期类流插入操作符的重载与友元3.1 友元3.2 友元函数…...

Spring状态机简单实现

一、什么是状态机 状态机&#xff0c;又称有限状态自动机&#xff0c;是表示有限个状态以及在这些状态之间的转移和动作等行为的计算模型。状态机的概念其实可以应用的各种领域&#xff0c;包括电子工程、语言学、哲学、生物学、数学和逻辑学等&#xff0c;例如日常生活中的电…...

WebServer -- 面试题(下)

&#x1f442; 夏风 - Gifty - 单曲 - 网易云音乐 目录 &#x1f33c;前言 &#x1f382;面试题(下) 4&#xff09;HTTP报文解析 为什么要用状态机 状态转移图画一下 https 协议为什么安全 https 的 ssl 连接过程 GET 和 POST 的区别 5&#xff09;数据库注册登录 登…...

企业微信如何接入第三方应用?

1.登录企业微信管理后台&#xff1a;https://work.weixin.qq.com/wework_admin​​​​​ 2.点击创建应用&#xff1b; ​​​​​​​ 3. 此时可以看到已经创建好的应用&#xff0c;并且生成应用的唯一id&#xff08;agentId&#xff09; 4. 第三方应用申请域名 (举例&…...

JAVA后端编码的主键字段存储为什么倾向于使用雪花算法

1.背景 最近有人问&#xff0c;什么是雪花算法&#xff0c;为什么使用雪花算法不使用数据库UUID&#xff0c;基于此&#xff0c;写一个说明。 2.简介 &#xff08;1&#xff09;雪花算法&#xff0c;英文名为snowflake&#xff0c;翻译过来就是是雪花&#xff0c;所以叫雪花…...

Rust 深度学习库 Burn

一、概述 Burn 它是一个新的综合动态深度学习框架&#xff0c;使用 Rust 构建的&#xff0c;以极高的灵活性、计算效率和可移植性作为其主要目标。 Rust Burn 是一个以灵活性、高性能和易用性为核心设计原则工具&#xff0c;主打就是灵活性 、高性能 及易用性。 二、Rust B…...

C语言-存储期2.0

静态存储期 在数据段中分配的变量&#xff0c;统统拥有静态存储期&#xff0c;因此也都被称为静态变量。这里静态的含义&#xff0c;指的是这些变量的不会因为程序的运行而发生临时性的分配和释放&#xff0c;它们的生命周期是恒定的&#xff0c;跟整个程序一致。 静态变量包含…...

计算机网络面经八股-HTTP请求报文和响应报文的格式?

请求报文格式&#xff1a; 请求行&#xff08;请求方法URI协议版本&#xff09;请求头部空行请求主体 请求行&#xff1a;GET /sample.jsp HTTP/1.1 表示使用 GET 方法请求 /sample.jsp 资源&#xff0c;并使用 HTTP/1.1 协议。请求头部&#xff1a;包含多个字段&#xff0c;…...

Ubuntu 18.04安装最新版Visual Studio Code(VS Code)报依赖库版本过低错误

Ubuntu 18.04安装最新版Visual Studio Code&#xff08;VS Code&#xff09;报依赖库版本过低错误 1. 问题描述2. 解决方案2.1 修复之前安装的错误2.2 安装VS Code 1.85.2 3. 原因分析 1. 问题描述 在Ubuntu 18.04系统上安装VS Code ≥ v1.86.2&#xff08;测试到v1.87.1&…...

Android NDK入门:在应用中加入C和C++的力量

目录 ​编辑 引 NDK的设计目的 与Java/Kotlin的结合 使用场景 开发流程 设置项目以支持NDK 编写本地代码 使用JNI连接本地代码和Java/Kotlin代码 编译和运行你的应用 附 引 自诩方向是android方向的移动端开发工程师&#xff0c;却从来没有真正仔细了解过NDK&#…...

2024年华为OD机试真题-田忌赛马-Java-OD统一考试(C卷)

题目描述: 给定两个只包含数字的数组a,b,调整数组 a 里面数字的顺序,使得尽可能多的 a[i] >b[i]。数组 a和 b 中的数字各不相同。 输出所有可以达到最优结果的 a 数组的数量 输入描述: 输入的第一行是数组 a 中的数字,其中只包含数字,每两个数字之间相隔一个空格,a…...

C++ 网络编程学习五

C网络编程学习五 网络结构的更新单例模式懒汉单例模式饿汉单例模式懒汉式指针智能指针设计单例类 服务器优雅退出asio的多线程模型IOServiceasio多线程IOThreadPoolepoll 和 iocp的一些知识点 网络结构的更新 asio网络层&#xff0c;会使用io_context进行数据封装&#xff0c;…...

案例分析篇05:数据库设计相关28个考点(9~16)(2024年软考高级系统架构设计师冲刺知识点总结系列文章)

专栏系列文章推荐: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…...

pip 和conda 更换镜像源介绍

1、前言 很多深度学习的项目免不了安装库文件、配置环境等等&#xff0c;如果利用官方提供的连接&#xff0c;网速很慢&#xff0c;而且很容易download掉。 所以配置好了虚拟环境&#xff0c;将pip换源属实重要 常见的国内镜像源有清华、中科大、阿里等等... 这里建议用中科…...

Git概述及安装步骤

一、Git简介 Git是一个免费的、开源的分布式版本控制系统&#xff0c;可以快速高效地处理从小型到大型的各种项目。Git 易于学习&#xff0c;占地面积小&#xff0c;性能极快。它具有廉价的本地库&#xff0c;方便的暂存区域和多个工作流分支等特性。其性能优于Subversion、CV…...

北京保险服务中心携手镜舟科技,助推新能源车险市场规范化

2022 年&#xff0c;一辆新能源汽车在泥泞的小路上不慎拖底&#xff0c;动力电池底壳受损&#xff0c;电池电量低。车主向保险公司报案&#xff0c;希望能够得到赔偿。然而&#xff0c;在定损过程中&#xff0c;保司发现这辆车的电池故障并非由拖底事件引起&#xff0c;而是由于…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...