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

今日讲讲父子传值~

今天来讲讲父子传值中的几种方法~         

        项目中往往会把一些常用的公共代码抽离出来,写成一个子组件。或者在一个页面中的代码太多,可以根据功能的不同抽离出相关代码写成子组件,这样代码结构会更加简洁明了,后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍,vue中的父子组件传值,要注意的是遵守单向数据流原则。所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据;但是,子组件中不能直接修改父组件传过来的数据,必须要向父组件传递一个事件来父组件需要修改数据,即通过子组件的操作,在父组件中修改数据;这就是单项数据流

子组件需要做的事:
①首先定义一个子组件叫son。
②在子组件里面设置一个data属性,当作父组件传过来的数值。
③用props声明一下这个数值是父组件传过来的参数。

父组件需要做的事:
①然后定义一个父组件叫father。
②引入子组件。
③注册子组件。
④使用子组件。
⑤给子组件绑定需要传过去的属性。

现在就说说这个父传子的方法:

:

在"标签"上传属性

<Card :name="name"></Card>

:

在props中

export default {props: {name: String},setup(props) {console.log(props.name);}
}

是不是很简单明了呢(有哪里不对或者不懂得,在评论区或者私信Q我哦~)

下面我们就说说子传父

:

触发,给一个事件传值

setup(props,{emit}) {emit("get","传递的数据");}

:

绑定传的时候起的事件名,接收参数

<Card @get="on"></Card>

相关文章:

今日讲讲父子传值~

今天来讲讲父子传值中的几种方法~ 项目中往往会把一些常用的公共代码抽离出来&#xff0c;写成一个子组件。或者在一个页面中的代码太多&#xff0c;可以根据功能的不同抽离出相关代码写成子组件&#xff0c;这样代码结构会更加简洁明了&#xff0c;后续维护更加方便。…...

三、HarmonyOS 应用开发入门之运行Hello World

目录 1、课程对象 1.1、有移动端开发经验 1.2、无移动端开发经验 1.3、对 HarmonyOS 感兴趣 2、DevEco Studio 的使用 2.1、DevEco Studio 的关键特性 智能代码编辑 低代码开发 多段双向实时预览 多端模拟仿真 2.2、安装配置 DevEco Studio 2.2.1、官网开发工具下载地…...

国科大网络行为学导论代码作业--更新中

一、Xray安装 参考自&#xff1a;Xray的安装与使用&#xff08;超详细&#xff09;_xray使用教程-CSDN博客 下载网址&#xff1a;Releases chaitin/xray GitHub 解压 双击安装 生成证书 cd到xray目录&#xff0c;生成证书 复制链接 然后cd到xray目录 .\xray_windows_amd6…...

JAVA后端开发面试基础知识(九)——SpringBoot

启动原理 SpringBoot启动非常简单,因其内置了Tomcat,所以只需要通过下面几种方式启动即可: @SpringBootApplication(scanBasePackages = {"cn.dark"}) public class SpringbootDemo {public static void main(String[] args) {// 第一种SpringApplication.run(S…...

C#调用Halcon出现尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException

一、现象 在C#中调用Halcon&#xff0c;出现异常提示&#xff1a;尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException 二、原因 多个线程同时访问Halcon中的某个公共变量&#xff0c;导致程序报错 三、测试 3.1 Halcon代码 其中tsp_width…...

ts基础知识

1. any 类型&#xff0c;unknown 类型&#xff0c;never 类型 TypeScript 有两个“顶层类型”&#xff08;any和unknown&#xff09;&#xff0c;但是“底层类型”只有never唯一一个 1、any 1.1 基本含义 any 类型表示没有任何限制&#xff0c;该类型的变量可以赋予任意类型的…...

KLayout Python Script ------ 绘制1个 Box 物体

KLayout Python Script ------ 绘制两个 Box 物体 引言正文引言 本人通常使用 IPKISS 进行版图绘制,然而很多时候,IPKISS 的功能十分鸡肋。因此,萌生了一种自己写绘制软件的想法,因为 IPKISS 绘制的版图最终也是使用 KLayout 来呈现的,因此,再研究了 KLayout 提供的 API…...

c# 编辑、删除一条数据

1、编辑数据 [HttpPost] public MessageModel<string> Put([FromBody] Dtable request) { var data new MessageModel<string>(); request.UPDATETIME DateTime.Now; if (request.ID>0) { …...

高性能服务系列【八】C10M时代,网络IO库需要重建

在目前网络上能搜索到的&#xff0c;关于网络IO模型的文章&#xff0c;基本都是关于多路复用的iocp/epoll的&#xff0c;这些技术是为了解决C10K问题而提出的解决方案。现代网卡已经普遍支持10Gb&#xff0c;100Gb也不少见&#xff0c;这些解决方案已经无法提升性能的需求。 我…...

Go语言与Rust哪一个更有发展前景?

Go语言和Rust都是目前非常受欢迎的编程语言&#xff0c;它们各自具有独特的优势和适用场景。关于哪一个更有发展前景&#xff0c;这实际上取决于多个因素&#xff0c;包括个人偏好、项目需求、社区支持以及未来技术的发展趋势等。 Go语言是由Google推出的&#xff0c;具有简洁…...

STM32使用定时器驱动电机

STM32使用定时器驱动电机 1、对定时器进行初始化配置1.1、include "encoder.c"文件 主函数 1、对定时器进行初始化配置 1.1、include "encoder.c"文件 #include "encoder.h"void TIM4_Encoder_Init(u16 arr,u16 psc) { GPIO_InitTypeDef GPIO…...

C语言游戏实战(4):人生重开模拟器

前言&#xff1a; 人生重开模拟器是前段时间非常火的一个小游戏&#xff0c;接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏&#xff1a; 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 &#xff08;1&#xff09; 游戏开始的时…...

MVC架构模式学习笔记(动力节点老杜2022)

GitHub代码笔记&#xff1a;laodu-mvc: 动力节点学习javaweb中的mvc笔记。 文章目录 1.视频链接 2.不使用MVC架构模式程序存在的缺陷 3.MVC架构模式理论基础 4.JavaEE设计模式-DAO模式 5.pojo & bean & domain 6.业务层抽取以及业务类实现 7.控制层 8.MVC架构模式与三…...

docker常用操作-docker私有仓库的搭建(Harbor),并将本地镜像推送至远程仓库中。

1、docker-compose安装&#xff0c;下载docker-compose的最新版本 第一步&#xff1a;创建docker-compose空白存放文件vi /usr/local/bin/docker-compose 第二步&#xff1a;使用curl命令在线下载&#xff0c;并制定写入路径 curl -L "https://github.com/docker/compos…...

什么是MVC

MVC的全名是Model View Controller&#xff0c;是模型(model)&#xff0d;视图(view)&#xff0d;控制器(controller)的缩写&#xff0c;是一种软件设计典范。它是用一种业务逻辑、数据与界面显示分离的方法来组织代码&#xff0c;将众多的业务逻辑聚集到一个部件里面&#xff…...

ChatGPT浪潮来袭!谁先掌握,谁将领先!

任正非在接受采访时说 今后职场上只有两种人&#xff0c; 一种是熟练使用AI的人&#xff0c; 另一种是创造AI工具的人。 虽然这个现实听起来有些夸张的残酷&#xff0c; 但这就是我们必须面对的事实 &#x1f4c6; 对于我们普通人来说&#xff0c;我们需要努力成为能够掌握…...

Focal and Global Knowledge Distillation forDetectors

摘要 文章指出&#xff0c;在目标检测中&#xff0c;教师和学生在不同领域的特征差异很大&#xff0c;尤其是在前景和背景中。如果我们 平等地蒸馏它们&#xff0c;特征图之间的不均匀差异将对蒸馏产生负面影响。因此&#xff0c;我们提出了局部和全局蒸馏。局部蒸馏分离前景和…...

FX110网:1月美国零售货币资金环比上升2.61%,嘉盛环比上升1.86%

美国商品期货交易委员会&#xff08;CFTC&#xff09;发布的最新月度报告显示&#xff0c;2024年1月零售货币存款与上月相比上升2.61%。 这份报告涵盖在美国运营的注册零售货币对交易商&#xff08;RFED&#xff09;和经纪自营商。包括嘉信理财&#xff08;CHARLES SCHWAB Futu…...

全量知识系统的核心-全量知识的一个“恰当组织”的构想及百度AI答问

全量知识系统的核心-全量知识的一个恰当组织 Q1. 以下是对 我刚刚完成的文档“全量知识系统的核心&#xff1a;全量知识的一个恰当组织构想”的百度AI答复。由于字数400的限制&#xff0c;内容被分成四段. 第一次回答&#xff1a;学科和科学的框架 关于技术学科、一般学科和…...

C++中using 和 typedef 的区别

C中using 和 typedef 的区别_typedef using-CSDN博客 在C中&#xff0c;“using”和“typedef”执行声明类型别名的相同任务。两者之间没有重大区别。C中的“Using”被认为是类型定义同义词。此方法也称为别名声明。定义这些别名声明的工作方式类似于使用“using”语句定义C中…...

Android AdvancedRecyclerView与LiveData结合:实现数据实时更新的终极指南

Android AdvancedRecyclerView与LiveData结合&#xff1a;实现数据实时更新的终极指南 【免费下载链接】android-advancedrecyclerview RecyclerView extension library which provides advanced features. (ex. Googles Inbox app like swiping, Play Music app like drag and…...

Intv_ai_mk11在人工智能教育中的应用:个性化学习伙伴

Intv_ai_mk11在人工智能教育中的应用&#xff1a;个性化学习伙伴 1. 教育领域的新助手 最近几年&#xff0c;人工智能在教育领域的应用越来越广泛。作为一款专门为教育场景设计的AI助手&#xff0c;Intv_ai_mk11正在改变传统学习方式。它不仅能解答学生问题&#xff0c;还能根…...

为什么H5SC是每个开发者必备的安全工具?终极HTML5安全指南

为什么H5SC是每个开发者必备的安全工具&#xff1f;终极HTML5安全指南 【免费下载链接】H5SC HTML5 Security Cheatsheet - A collection of HTML5 related XSS attack vectors 项目地址: https://gitcode.com/gh_mirrors/h5/H5SC 在当今Web开发领域&#xff0c;HTML5安…...

GHelper完整指南:免费轻量级华硕笔记本性能控制工具终极教程

GHelper完整指南&#xff1a;免费轻量级华硕笔记本性能控制工具终极教程 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Str…...

收藏!小白/程序员转行Agent必看,4步理清学习思路,轻松具备求职竞争力

如今&#xff0c;AI领域的风口早已到来&#xff0c;Agent作为当下最热门的赛道之一&#xff0c;掌握其相关技能&#xff0c;无疑能让你在就业市场中脱颖而出&#xff0c;成为企业争抢的核心人才。无论是刚入门的编程小白&#xff0c;还是想转型的资深程序员&#xff0c;Agent都…...

美胸-年美-造相Z-Turbo创意工坊:支持批量生成、种子固定、参数网格搜索功能

美胸-年美-造相Z-Turbo创意工坊&#xff1a;支持批量生成、种子固定、参数网格搜索功能 如果你正在寻找一个能稳定、高效生成特定风格图片的AI工具&#xff0c;特别是对“美胸-年美”这类风格有需求&#xff0c;那么你找对地方了。今天要介绍的这个工具&#xff0c;不仅部署简…...

RocketMQ的“三高”架构设计

RocketMQ的“三高”架构设计&#xff0c;主要围绕高可用、高吞吐、高扩展三个维度展开&#xff0c;分别解决服务不中断、性能不瓶颈、规模不设限的核心问题。1 高可用&#xff08;High Availability&#xff09;高可用的目标是确保部分组件故障时&#xff0c;消息服务依然可用&…...

libpng 官方参考库中的这两个严重漏洞已存在30年之久

聚焦源代码安全&#xff0c;网罗国内外最新资讯&#xff01;编译&#xff1a;代码卫士安全研究人员披露了位于 libpng 官方参考库中的两个严重漏洞。libpng 是便携式网络图形格式的官方参考库。这些漏洞影响了跨越数十年开发历程的多个版本&#xff0c;可能允许攻击者触发进程崩…...

GetQzonehistory:3步轻松永久备份QQ空间所有历史说说

GetQzonehistory&#xff1a;3步轻松永久备份QQ空间所有历史说说 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 还在担心QQ空间里那些承载青春记忆的说说会突然消失吗&#xff1f;GetQ…...

避坑指南:UE5 VaRest插件处理JSON数组和嵌套对象的几个常见错误

UE5 VaRest插件处理JSON数组和嵌套对象的避坑指南 在UE5开发中&#xff0c;VaRest插件因其便捷的HTTP请求和JSON处理能力而广受欢迎。然而&#xff0c;当面对复杂的JSON数据结构时&#xff0c;许多开发者会遇到各种"坑"。本文将深入剖析VaRest在处理JSON数组和嵌套对…...