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

【Vue】组件间传参与方法调用

【前言】

【目标】

1 了解组件间传参
2 组件间自定义事件绑定与解绑
3 组件的事件总线
4 消息订阅与发布

一 组件间传参

1 props

引入并使用组件:传递参数

<template><div id="app"><HelloWorld :msg="msg" :name="name" :edit="edit"/></div>
</template><script>
import HelloWorld from './components/HelloWorld/index.vue'
export default {name: 'App',components: {HelloWorld},data(){return{msg:'你好呀!',name:'张三'}},methods:{edit(m,n){console.log('接收到组件传递的数据',m,n)this.msg = mthis.name= n}}
}
</script>
</script>

组件用props接收参数
props可以接收data中所有的参数,也可以接收父组件传过来的methods方法

<template><div class="hello"><h1>{{ msg }}{{ name }}</h1><button @click="send">发送消息</button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: {type:String,default:'',},name: {type:String,// required:true},edit:{type:Function}},data(){return{// name:'王五'}},methods:

相关文章:

【Vue】组件间传参与方法调用

【前言】 … 【目标】 1 了解组件间传参 2 组件间自定义事件绑定与解绑 3 组件的事件总线 4 消息订阅与发布 一 组件间传参 1 props 引入并使用组件:传递参数 <template><div id="app"><HelloWorld :msg="msg" :name="name" …...

类和对象2

三、C对象模型和this指针 3.1 成员变量和成员函数分开存储 在C中&#xff0c;类内的成员变量和成员函数分开存储&#xff0c;只有非静态成员变量才属于类的对象上 #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include <string.h> using namespace …...

Linux系统命令traceroute详解(语法、选项、原理和实例)

目录 一、traceroute概述 二、语法 1、基本语法 2、命令选项 三、帮助信息 四、示例 1. 使用默认模式&#xff08;ICMP Echo&#xff09;追踪到目标主机 2. 使用UDP模式&#xff08;需要root权限&#xff09;追踪到目标主机 3. 不解析IP地址为主机名&#xff0c;直接显…...

中兴通讯助力中国移动,推动SPN AI节能技术于23省规模部署

SPN作为中国移动自主创新的新一代综合承载网络&#xff0c;相比PTN设备&#xff0c;SPN的单机容量及性能有大幅提升&#xff0c;整机功耗也相应变大。在当前国家双碳政策的目标下&#xff0c;SPN设备的节能降耗也日益成为中国移动关注的焦点。因此&#xff0c;中国移动选择与中…...

SQL Server--死锁

今天&#xff0c;客户反应打不开xxx页面了。好家伙肯定锁表了。。。。。 只能先吧死锁进程先kill掉&#xff0c;不能耽误客户生产环境运行。。。。。 一定要看看是那张表发生了死锁 1、查询死锁语句 select dbid,* from sys.sysprocesses where 11 and spid >50 and blo…...

中科蓝讯AB32VG1中文寄存器说明GPIO端口操作

1 GPIO管理 1.1 GPIO通用控制寄存器 寄存器 1- 1 GPIOA&#xff1a;端口 A 数据寄存器 位寄存器名模式缺省描述31:8---未使用7:0GPIOA写0x00PAx 数据。当 PAx 用作 GPIO 时有效 0&#xff1a;读取时PAx为输入低电平状态&#xff0c;写入时PAx为输出低电平; 1&#xff1a;PAx…...

如何查看热门GPT应用?

1、登陆chatgpt 2、访问 https://chatgpt.com/gpts 3、在该界面&#xff0c;可以搜索并使用image generator, Write For Me&#xff0c;Language Teature等热门应用。...

C++中的各种定义

文章目录 前言一、1、unsigned2、_countof、sizeof 总结 前言 一、 1、unsigned 在C语言中&#xff0c;"unsigned"是一个数据类型修饰符&#xff0c;用于修饰整数类型&#xff0c;表示该类型的变量只能存储非负整数&#xff0c;即无符号整数。它可以应用于char、s…...

Java面向对象-常用类(日期时间类)

常用类-日期时间类 Date&#xff08;java.util.Date&#xff09; – 日期类 SimpleDateFormat – 格式化日期类 Calendar – 日历类 1 Date类 java.util.Date类表示特定的瞬间&#xff0c;精确到毫秒。 package com.qf.datetime;import java.util.Date;public class Test01 {…...

Shell环境变量深入:自定义系统环境变量

Shell环境变量深入&#xff1a;自定义系统环境变量 目标 能够自定义系统级环境变量 全局配置文件/etc/profile应用场景 当前用户进入Shell环境初始化的时候会加载全局配置文件/etc/profile里面的环境变量, 供给所有Shell程序使用 以后只要是所有Shell程序或命令使用的变量…...

【C++课程学习】:命名空间的理解(图文详解)

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f4f7;1.命名冲突 &#x1f4f7;2.重定义 &#x1f4f7;3.命名空间 &#x1f37a;命名空间可…...

鸿蒙ArkUI-X平台差异化:【运行态差异化(@ohos.deviceInfo)】

平台差异化 简介 跨平台使用场景是一套ArkTS代码运行在多个终端设备上&#xff0c;如Android、iOS、OpenHarmony&#xff08;含基于OpenHarmony发行的商业版&#xff0c;如HarmonyOS Next&#xff09;。当不同平台业务逻辑不同&#xff0c;或使用了不支持跨平台的API&#xf…...

蓝牙Mesh模块组网时无线回程影响速率吗?

随着科技的发展&#xff0c;智能家居、智能办公等场景越来越广泛地应用于我们的生活。其中&#xff0c;蓝牙Mesh组网技术作为一种新型的无线通信技术&#xff0c;受到了越来越多用户的关注。那么&#xff0c;蓝牙Mesh模块在组网时无线回程过程中是否会影响速率呢&#xff1f;本…...

将3D检测的box框投影到BEV图片上

前言 点云数据作为一种丰富的三维空间信息表达方式&#xff0c;通常用于自动驾驶、机器人导航和三维建模等领域。然而&#xff0c;点云数据的直观性不如二维图像&#xff0c;这限制了它在一些需要快速视觉反馈的应用场景中的使用。本文将探讨如何将点云数据转换为二维图像&…...

Flutter 中的 ClipOval 小部件:全面指南

Flutter 中的 ClipOval 小部件&#xff1a;全面指南 在Flutter的丰富布局库中&#xff0c;ClipOval是一个用于裁剪子组件的显示区域为椭圆形或圆形的小部件。这种裁剪效果可以用于创建头像、图标或其他图形元素的美观边框。本文将提供ClipOval的全面指南&#xff0c;帮助你了解…...

ubuntu 硬盘转移

我插了两个 文件系统&#xff1a; ubuntu 硬盘转移&#xff1a; sudo dd if/dev/sdX1 of/dev/sdY1 bs128K convnoerror,sync statusprogressdd 的意思是DiskToDisk&#xff0c;if 是输入文件系统&#xff0c;of是输出文件系统。 bs是每次传递的数据大小。 注意&#xff1a;接…...

three.js中使用CameraHelper来可视化调整阴影相机的范围

1. three.js中使用CameraHelper来可视化调整阴影相机的范围 光源 const directionLight new THREE.DirectionalLight(0xffffff, 1); directionLight.position.set(100, 60, 20); directionLight.castShadow true; scene.add(directionLight);设置计算阴影的范围 direction…...

Golang发送GET请求并设置查询参数

服务端 package mainimport ("encoding/json""net/http""zdpgo_chi""zdpgo_chi/middleware" )func main() {r : zdpgo_chi.NewRouter()r.Use(middleware.RequestID)r.Use(middleware.RealIP)r.Use(middleware.Logger)r.Use(middlewar…...

c++笔记3

优先队列 普通的队列是一种先进先出的数据结构&#xff0c;元素在队列尾追加&#xff0c;而从队列头删除。优先队列是一种按照优先级决定出队顺序的数据结构&#xff0c;优先队列中的每个元素被赋予级别&#xff0c;队首元素的优先级最高。 例如&#xff1a;4入队&#xff0c…...

唠唠叨叨,每日进度

今天学了一个strcpy’的模拟实现&#xff0c;现在需要去写水课作业了&#xff0c;加油&#xff01;&#xff01;&#xff01;...

Wand-Enhancer:3步解锁WeMod专业版功能的完整用户指南

Wand-Enhancer&#xff1a;3步解锁WeMod专业版功能的完整用户指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否厌倦了WeMod免费版的种种限制&a…...

Unity背包拖拽实战:三坐标系映射与跨Panel交互原理

1. 这不是“拖一拖就完事”的UI小功能&#xff0c;而是Unity UI系统能力的实战压力测试 在Unity项目里&#xff0c;“背包装备拖拽”这六个字&#xff0c;新手常以为只是给Image加个DragHandler接口、写几行OnBeginDrag/OnDrag/OnEndDrag回调——结果上线前一周&#xff0c;策划…...

Qt/C++源码/监控GB28181组件/实时视频/云台控制/预置位/录像回放和下载/事件订阅/语音对讲/推流分发

一、功能特点 支持设备注册、注销、心跳、校时、注册认证、注销认证等。设备上线后可以手动获取设备状态、设备信息、配置信息、预置位信息等。设备上线后自动获取设备通道信息&#xff0c;包括中文通道名称。识别到通道上线离线变化&#xff0c;会重新获取该设备的所有通道信…...

Lumafly:空洞骑士模组管理终极指南,三步告别依赖冲突烦恼

Lumafly&#xff1a;空洞骑士模组管理终极指南&#xff0c;三步告别依赖冲突烦恼 【免费下载链接】Lumafly A cross platform mod manager for Hollow Knight written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/lu/Lumafly 你是否曾经为了安装一个空洞骑…...

别再傻傻分不清!Keil C51和MDK-ARM双版本保姆级安装与共存指南(附资源)

Keil C51与MDK-ARM双版本高效共存实战手册 引言&#xff1a;为什么开发者需要同时安装两个版本&#xff1f; 在嵌入式开发领域&#xff0c;51单片机和ARM架构设备依然占据着重要地位。许多工程师和学生在项目开发或学习过程中&#xff0c;常常需要同时接触这两种不同架构的芯片…...

深入 QEMU 热迁移

深入 QEMU 热迁移&#xff1a;从状态机到数据平面的全链路剖析 “把一台正在运行的虚拟机从一台主机搬到另一台&#xff0c;还让里面的操作系统浑然不觉——这听起来像魔法&#xff0c;实则是精密的工程。” 引言 实时迁移是 QEMU 最核心的子系统之一。它允许将一个正在运行的…...

华硕笔记本终极优化指南:如何用G-Helper轻量级工具全面提升使用体验

华硕笔记本终极优化指南&#xff1a;如何用G-Helper轻量级工具全面提升使用体验 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook…...

HFSS的Solution type及其激励端口设置规则

本文围绕Ansys HFSS 电磁仿真展开&#xff0c;依次探讨辐射边界特性、软件求解类型、PCB 板载天线求解选型、两类端口原理差异、端口信号地判定与集总端口参考面设置、求解与端口适配规则六大板块内容&#xff0c;完整梳理如下&#xff1a;一、HFSS 辐射边界条件相关讨论基本定…...

贝叶斯优化驱动量子噪声建模:数据高效提升NISQ仿真精度

1. 项目概述与核心价值在量子计算领域&#xff0c;尤其是在当前嘈杂中型量子&#xff08;NISQ&#xff09;时代&#xff0c;一个核心的挑战在于如何让仿真结果与真实硬件上的运行结果保持一致。我们设计量子算法、优化电路布局、评估性能&#xff0c;很大程度上依赖于对量子处理…...

Selenium WebDriver协议层原理与稳定性实战

1. 这不是“又一个Selenium教程”——它解决的是你写完第一行代码后立刻卡住的问题“Selenium WebDriver教程”这六个字&#xff0c;我过去三年在团队内部文档、外包需求评审、新人入职培训材料里见过至少278次。但几乎每次打开&#xff0c;都只看到“安装ChromeDriver”“启动…...