【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:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841722.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《python编程从入门到实践》day39加更

# 昨日知识点回顾 添加主题、条目 # 今日知识点学习 19.1.3 编辑条目 1.URL模式edit——entry # learning_logs/urls.py ---snip---# 用于编辑条目的页面path(edit_entry/<int:entry_id>/, views.edit_entry, nameedit_entry), ] 2.视图函数edit_entry() # views.py fr…

MySQL数据库中的多表查询/连接查询操作

类型&#xff1a;内连接 &#xff0c;外连接{左外连接&#xff0c;右外连接} 之所以要使用连接查询的意义就是为了&#xff0c;借助数据库可以避免大量的数据重复。 进行连接查询的前提是要求多张表之间存在相关联的字段。 这里指的相关联的字段就是表与表之间存在着关系&am…

ubantu驱动问题

ubuntu20.04安装nvidia显卡驱动-CSDN博客 sudo apt-get --purge remove nvidia* ubuntu-drivers devices nvcc -V Ubuntu(20.04)开机无法进入系统及白色下划线闪烁_安装ubuntu重启白色杠-CSDN博客 驱动程序

logback.xml相关配置——springboot项目

要在 Spring Boot 项目中将日志写入到 Logback 的配置文件 logback.xml 中&#xff0c;你可以按照以下步骤进行设置&#xff1a; 创建 Logback 配置文件&#xff1a; 在 src/main/resources 目录下创建一个名为 logback.xml 的文件。这是默认的 Logback 配置文件名&#xff0c;…

matplotlib latex表格

使用python3环境 import matplotlib.gridspec as gridspec import matplotlib.pyplot as pltimport numpy as np import matplotlib as mpl #mpl.use(pgf)def figsize(scale, nplots 1):fig_width_pt 390.0 # Get this from LaTeX using \the\text…

五种独立成分分析(ICA)

代码原理及流程 代码实现了混合信号的独立成分分析&#xff08;ICA&#xff09;过程&#xff0c;主要包括以下几个步骤&#xff1a; 原始语音信号读取与显示&#xff1a;首先读入原始的两个语音信号(music.wav和man.wav)&#xff0c;并显示在图中的第一和第二个子图中。混合声…

MacOS使用PhpStorm+Xdebug断点调式

基本环境&#xff1a; MacOS m1 PhpStorm 2024.1 PHP7.4.33 Xdebug v3.1.6 1、php.ini 配置 [xdebug] zend_extension "/opt/homebrew/Cellar/php7.4/7.4.33_6/pecl/20190902/xdebug.so" xdebug.idekey "PHPSTORM" xdebug.c…

基础—SQL—DDL—建表、查表、修改表以及总结

一、DDL—表—创建表与数据类型的设定 &#xff08;1&#xff09;要求 根据需求创建表(设计合理的数据类型、长度) 设计一张员工信息表&#xff0c;要求如下: 1、编号&#xff08;纯数字) 2、员工工号(字符串类型&#xff0c;长度不超过10位) 3、员工姓名&#xff08;字符串类…

是的,我换logo了!

大家好&#xff0c;我是记得诚。 当你收到推文的时候&#xff0c;会发现记得诚换logo了&#xff01; 之前是这样的。 现在是这样的。 这个新logo&#xff08;头像&#xff09;是2年前在淘宝上请人做的&#xff0c;价值37人民币&#xff0c;但一直没有换上。当时还发了一个朋友…

python纯脚本搬砖DNF之深度学习,工作室适用

声明&#xff1a; 本文章仅作学习交流使用,对产生的任何影响&#xff0c;本人概不负责. 转载请注明出处:https://editor.csdn.net/md?articleId103674748 主要功能 脚本已初步完成&#xff0c;可以上机实战了 1.搬砖研究所、海伯伦&#xff08;持续更新中&#xff09; 2.自…

Mysql中表之间的关系

表之间的关系 一对一、多对一&#xff08;其实就是主从关系&#xff0c;在从表中设置一个外键关联上主表&#xff09;、多对多关系&#xff08;需要一个中间表&#xff0c;设置两个外键&#xff0c;分别关联到两个表的主键&#xff09; 比如订单和商品之间&#xff1a;一个订单…

Spring从零开始学使用系列(四)之@PostConstruct和@PreDestroy注解的使用

如果各位老爷觉得可以&#xff0c;请点赞收藏评论&#xff0c;谢谢啦&#xff01;&#xff01; 文章中涉及到的图片均由AI生成 公众号在最下方&#xff01;&#xff01;&#xff01; 目录 1. 介绍 1.1 PostConstruct概述 1.2 PreDestroy概述 2. 基本用法 2.1 注册CommonAnn…

AlexNet论文解析—ImageNet Classification with Deep Convolutional Neural Networks

AlexNet论文解析—ImageNet Classification with Deep Convolutional Neural Networks 2012 研究背景 认识数据集&#xff1a;ImageNet的大规模图像识别挑战赛 LSVRC-2012&#xff1a;ImageNet Large Scale Visual Recoanition Challenge 类别训练数据测试数据图片格式Mnist1…

通关!游戏设计之道Day15

多人游戏——越多越开心 多人游戏能给玩家带来更多的乐趣 面对面 网络对战 大型多人在线 点对点Wifi 在决定了玩家的连接方式后&#xff0c;接下来就要确定他们的玩法类型了。 竞争型 合作型 配合型 多人游戏模式 死亡竞赛/混战模式 团队死亡竞赛 格斗 生存 区域/…

安装mamba时报错bare_metal_version

原因&#xff1a;缺少cuda118的环境版本&#xff0c;直接安装 nvidia/label/cuda-11.8.0 可解决&#xff0c;代码如下&#xff1a; conda install -c "nvidia/label/cuda-11.8.0" cuda-nvcc

【java程序设计期末复习】chapter6 接口和实现

接口与实现 接口 为了克服Java单继承的缺点&#xff0c;Java使用了接口&#xff0c;一个类可以实现多个接口。 使用关键字interface来定义一个接口。接口的定义和类的定义很相似&#xff0c;分为接口的声明和接口体。 接口通过使用关键字interface来声明 interface Printab…

复习java5.26

面向对象和面向过程 面向过程&#xff1a;把一个任务分成一个个的步骤&#xff0c;当要执行这个任务的时候&#xff0c;只需要依次调用就行了 面向对象&#xff1a;把构成任务的事件构成一个个的对象&#xff0c;分别设计这些对象&#xff08;属性和方法&#xff09;、然后把…

MybatisPlus静态工具Db

前言&#xff1a;在开发的时候&#xff0c;有时Service之间也会相互调用&#xff0c;会出现循环依赖问题&#xff0c;MybatisPlus提供一个静态工具类:Db&#xff0c;其中的一些静态方法与IService中方法签名基本一致&#xff0c;也可以帮助我们实现CRUD功能。 一、Db工具类中常…

Tomcat调优参数

JVM优化 Tomcat是一个Web容器&#xff0c;所有的jar其实都共享Tomcat中的JVM参数&#xff0c;所以Tomcat的JVM参数优化至关重要。 Tomcat的JVM参数是在启动脚本中设置的&#xff0c;如想要设置最大堆内存和最小堆内存时&#xff1a; 在windows的启动脚本catalina.bat中的set &q…

深度学习面试问题总结(21)| 模型优化

本文给大家带来的百面算法工程师是深度学习模型优化面试总结&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;我们还将介绍一些常见的深度学习面试问题&#xff0c;并提供参考的回答及其理论基础&a…