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

vue3 父子组件传值

一,子传父

父组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'//直接赋值页面不会自动渲染,使用ref存储响应式数据
import { defineExpose } from "vue";父传子
let val = ref('');
const childFun= value =>{console.log('----',value)// 这里直接赋值value,在页面上直接使用val即可!val.value=valueconsole.log('val',val)
}
</script><template><header><div class="wrapper"><HelloWorld @child="childFun"/></div></header>
<div>我是子组件过来的值:{{val}}</div>
</template>

子组件

<script setup>
import {  defineEmits } from 'vue'//子传父值先引用emits方法defineProps({msg: {type: String,required: true}})
//要先声明,不然会报错
const emits = defineEmits(['child'])
function tofu (){emits('child','123')
}
</script><template><div class="greetings"><h1 class="green">msg</h1><button @click="tofu">子组件按钮</button></div>
</template>

二,父传子

父组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'</script><template><header><div class="wrapper"><HelloWorld msg='我是父组件'/></div></header></template>

子组件

<script setup>defineProps({msg: {type: String,required: true}})</script><template><div class="greetings"><h1 class="green">{{msg}}</h1></div>
</template>

vue3和vue2区别还是有一些的,V2传值直接赋值,有时是可以直接数据响应渲染

setup可以直接写在script标签上,也可以写成函数形式

const声明的变量,在后期不能进行修改,不然会报错,需后期修改的变量尽量使用let ,var,根据情况使用

相关文章:

vue3 父子组件传值

一&#xff0c;子传父 父组件 <script setup> import HelloWorld from ./components/HelloWorld.vue import { ref } from vue//直接赋值页面不会自动渲染&#xff0c;使用ref存储响应式数据 import { defineExpose } from "vue";父传子 let val ref(); con…...

【看懂MPLS LSP表项】

IP网络 R1根据路由表项去查FIB表 目的网络、出口、下一跳 MPLS网络 R1根据LFIB表现去查表&#xff0c; 路由&#xff0c;出口、(标签) 要实现MPLS网络全局可达性&#xff0c;R1应具有到每一个LSR、LSE的路由。 1、R1去FEC(转发等价类) /去往2.2.2.2的路由《路由方…...

代码随想录训练营 单调栈

代码随想录训练营 单调栈 84. 柱状图中最大的矩形&#x1f338; 最后一天~ 84. 柱状图中最大的矩形&#x1f338; 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最…...

Android MQTT

MQTT Android MQTT连接,重新编译Service-1.1.1兼容Android高版本服务 Paho Android Service-1.1.1 Paho Client Mqtt3-1.1.0 资源 名字资源AAR下载GitHub查看Gitee查看 Maven 1.build.grade allprojects {repositories {...maven { url https://jitpack.io }} }2./app/bu…...

Codeforces Round 823 (Div. 2)C

更好的阅读体验 C. Minimum Notation 思路&#xff1a;我们可以进行的操作时将一个位置的数删除然后在任意位置处添加一个比当前数大1并且小于9的数&#xff0c;所以我们的操作只会让一个数变大&#xff0c;我们统计一个最大值的后缀&#xff0c;贪心的考虑如果当前数的后面有…...

npm发布vue3自定义组件库--方法一

npm发布vue3自定义组件库 创建项目 vue create test-ui自定义组件 创建自定义组件&#xff0c;组件名称根据你的需求来&#xff0c;最好一个组件一个文件夹&#xff0c;下图是我的示例。 src/components 组件和你写页面一样&#xff0c;所谓组件就是方便实用&#xff0c;不…...

Centos7原生hadoop环境,搭建Impala集群和负载均衡配置

Centos7原生hadoop环境&#xff0c;搭建Impala集群和负载均衡配置 impala介绍 Impala集群包含一个Catalog Server (Catalogd)、一个Statestore Server (Statestored) 和若干个Impala Daemon (Impalad)。Catalogd主要负责元数据的获取和DDL的执行&#xff0c;Statestored主要负…...

如何在macOS上安装Go并搭建本地编程环境

引言 Go是一种诞生于挫折中的编程语言。在谷歌&#xff0c;开发人员厌倦了在为新项目选择语言时必须做出权衡。有些语言执行效率很高&#xff0c;但需要很长时间编译&#xff0c;而另一些语言易于编写&#xff0c;但在生产环境中运行效率很低。因此&#xff0c;谷歌发明了Go语…...

postgresql-存储过程

postgresql-存储过程 简述PL/pgSQL 代码块结构示例嵌套子块 声明与赋值控制结构IF 语句CASE 语句简单case语句搜索 CASE 语句 循环语句continuewhilefor语句遍历查询结果 foreach 游标游标传参 错误处理报告错误和信息检查断言 捕获异常自定义函数重载VARIADIC 存储过程示例事务…...

改造user ,使得userId相同视为一个对象,user是Key,User的username做value

如果您想要将具有相同userId的用户视为一个对象&#xff0c;其中User对象是键&#xff0c;而User对象的username是值&#xff0c;您可以使用Java的Map<User, String>数据结构来实现。以下是示例代码&#xff1a; java import java.util.*;class User {private int userI…...

力扣刷题-数组-滑动窗口法相关题目总结

209. 长度最小的子数组&#xff08;最小滑窗&#xff09; 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0。 示例&#xff1a; 输入&…...

Qt创建线程(线程池)

1.线程池可以创建线程统一的管理线程&#xff08;统一创建、释放线程&#xff09; 2.使用线程池方法实现点击开始按钮生成10000个随机数&#xff0c;然后分别使用冒泡排序和快速排序排序这10000个随机数&#xff0c;最后在窗口显示排序后的数字&#xff1a; mainwindow.h文件…...

【Java】泛型 之 使用泛型

使用ArrayList时&#xff0c;如果不定义泛型类型时&#xff0c;泛型类型实际上就是 Object&#xff1a; // 编译器警告: List list new ArrayList(); list.add("Hello"); list.add("World"); String first (String) list.get(0); String second (Strin…...

消费者NPS调查,帮您了解客户满意度!

随着市场竞争的日益激烈&#xff0c;了解消费者需求和对企业品牌的认知程度&#xff0c;对于企业的持续发展至关重要。您的客户对您的产品或服务有多满意?您是否想提升客户忠诚度&#xff0c;从而增加业务的持续增长?群狼调研(长沙产品包装测试)为您提供全新的消费者NPS调查服…...

Webpack监视文件修改,自动重新打包文件

方法一&#xff1a;使用watch监视文件变化 在终端中输入以下指令&#xff1a; npx webpack --watch 我们使用这种方法监听文件变化时只会监听我们计算机本地的文件变化&#xff0c;在开发场景中我们的项目是要部署到服务器中的&#xff0c;因此这种方式并不推荐。 方法二&…...

list容器排序案例

案例描述:将Perspn自定义数据类型进行排序&#xff0c;Person中属性有姓名、年龄、身高 排序规则:按照年龄进行升序&#xff0c;如果年龄相同按照身高进行降序 代码示例 #include <iostream> #include <string.h> #include <iterator> #include <vector…...

PHP使用Analysis中英文分词

1、下载Analysis&#xff0c;创建test.php测试 2、引入Analysis实现中文分词 <?php include "./Analysis/Analysis.php";$annew \WordAnalysis\Analysis(); $content"机器学习是一门重要的技术&#xff0c;可以用于数据分析和模式识别。"; //10分词数…...

视频汇聚/视频云存储/视频监控管理平台EasyCVR录像存储功能如何优化?具体步骤是什么?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。视频监控系统EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…...

Web服务(Web Service)

简介 Web服务&#xff08;Web Service&#xff09;是一种Web应用开发技术&#xff0c;用XML描述、发布、发现Web服务。它可以跨平台、进行分布式部署。 Web服务包含了一套标准&#xff0c;例如SOAP、WSDL、UDDI&#xff0c;定义了应用程序如何在Web上实现互操作。 Web服务的服…...

Java第4章 类的继承

目录 内容说明 章节内容 一、继承的概念 二、继承的使用 extends关键字...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...