Vue2 组件通信方式

  1. props/emit
    1.  props
      1. 作用:父组件通过 props 向子组件传递数据
      2. parent.vue
        <template><div><Son :msg="msg" :pfn="pFn"></Son></div>
        </template><script>
        import Son from './son'
        export default {name: 'Parent',data() {return {msg:'a message'}},methods: {pFn(){console.log("这是pFn");}},components:{Son}
        }
        </script><style></style>
      3. son.vue
        <template><div><h3>p的msg:{{ msg }}</h3><el-button type="primary" size="default" @click="pfn">点击使用p的方法</el-button></div>
        </template><script>
        export default {name: 'Son',props:['pfn','msg']
        }
        </script><style></style>
      4. 效果
    2. emit
      1. 作用:子组件通过 $emit 和父组件通信
      2. parent.vue
        <template><div><Son :msg="msg"  @onSendData="onSendData"></Son></div>
        </template><script>
        import Son from './son'
        export default {name: 'Parent',data() {return {msg:'a message'}},methods: {},components:{Son},methods: {onSendData(val){console.log(val);}},
        }
        </script><style></style>
      3. son.vue
        <template><div><h3>p的msg:{{ msg }}</h3><el-button type="primary" size="default" @click="sendData">点击向p发送数据</el-button> </div>
        </template><script>
        export default {name: 'Son',props:['msg'],created() {console.log(this);},methods: {sendData(){this.$emit("onSendData",'data from son')}},
        }
        </script><style></style>
      4. 效果
  2. ref / $refs
    1. 作用:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法
    2. parent.vue
      <template><div><Son ref="Son"></Son></div>
      </template><script>
      import Son from './son.vue';
      export default {name: 'Parent',components:{Son,},mounted() {console.log("this.$refs.Son",this.$refs.Son.msg);this.$refs.Son.sayHi();},}
      </script><style></style>
    3. son.vue
      <template><div><h3>p的msg:{{ msg }}</h3></div>
      </template><script>
      export default {name: 'Son',data() {return {msg:"a message from son"}},methods: {sayHi(){console.log("hello");}},
      }
      </script><style></style>
    4. 效果

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

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

相关文章

winform图书管理系统

winform图书管理系统说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 图书管理员 读者管理 图书管理 添加 修改 删除 查看 入库 书册列表 书册管理用户管理退出 借书 还书 系统管理员 修改图书管理权限 项目获取&#xff1a;…

LeetCode 209 长度最小的子数组(滑动窗口and暴力)

、 法一&#xff1a;滑动窗口 //使用滑动窗口来解决问题 //滑动窗口的核心点有&#xff1a; /*1.窗口内是什么&#xff1f;2.如何移动窗口的起始位置&#xff1f;3.如何移动窗口的结束位置&#xff1f;4.两个指针&#xff0c;怎么判断哪个指针是终止指针&#xff0c;哪个指针…

代码随想录算法训练营第六十天| LeetCode647. 回文子串 、516.最长回文子序列

一、LeetCode647. 回文子串 题目链接/文章讲解/视频讲解&#xff1a;https://programmercarl.com/0647.%E5%9B%9E%E6%96%87%E5%AD%90%E4%B8%B2.html 状态&#xff1a;已解决 1.思路 这道题我只想出来了暴力解法&#xff0c;动规解法并没有想出来。根据视频讲解才把它想出来。…

针对macOS上的maven安装配置

这篇博客将向读者介绍如何安装和配置Maven。Maven是一个强大的项目管理工具&#xff0c;广泛用于Java项目的构建、依赖管理和项目报告生成。它可以极大地简化项目的构建过程&#xff0c;并帮助开发人员管理项目的各种依赖项。 什么是Maven&#xff1f; Maven是一个基于项目对…

C++——命名空间

c ——命名空间 前言一.命名空间命名空间的进一步拓展 二.io流特性 前言 ** 好久不见&#xff0c;甚是想念~今天我们讲解的是关于c命名空间的一些知识点&#xff0c;这只是开胃小菜哦&#xff0c;期待我们后面更深入知识的灵魂碰撞吧 ** 一.命名空间 怎么形容呢~命名空间出现…

Rocketmq如何保证消息不丢失和幂等性

生产者 生产者通过RocketMQ提供的事务消息&#xff08;两阶段提交&#xff09;能保证消息的一致性。 第一阶段给Broker发送一个半事务消息&#xff0c;半事务消息是不能消费的消息&#xff0c;broker已经收到生产者发送的消息&#xff0c;但是并未收到生产者的二次确认&#x…

SpringBoot异步接口实现:提高系统的吞吐量

前言 Servlet 3.0之前&#xff1a;每一次Http请求都由一个线程从头到尾处理。 Servlet 3.0之后&#xff0c;提供了异步处理请求&#xff1a;可以先释放容器分配给请求的线程与相关资源&#xff0c;减轻系统负担&#xff0c;从而增加服务的吞吐量。 在springboot应用中&#…

JavaScript使用 BigInt

在 JavaScript 中&#xff0c;最大的安全整数是 2 的 53 次方减 1&#xff0c;即 Number.MAX_SAFE_INTEGER&#xff0c;其值为 9007199254740991。这是因为 JavaScript 中使用双精度浮点数表示数字&#xff0c;双精度浮点数的符号位占 1 位&#xff0c;指数位占 11 位&#xff…

2024C题生物质和煤共热解问题的研究 详细思路

背景 随着全球能源需求的不断增长和对可再生能源的追求&#xff0c;生物质和煤共热解作为一种潜在的能源转化技术备受关注。生物质是指可再生能源&#xff0c;源自植物和动物的有机物质&#xff0c;而煤则是一种化石燃料。** 在共热解过程中&#xff0c;生物质和煤在高温和缺氧…

Linux系统调用mmap

0 前言 《Linux系统调用》整体介绍了系统调用,本文重点分析其中mmap的实现与使用方法。 1 定义 1.1 x86 (1)linux-2.6.31- 采用老式定义方法: asmlinkage long sys_mmap(unsigned long addr, unsigned long len,unsigned long prot, unsigned long flags,unsigned long…

记录解决问题--redis ssl连接

1.问题场景 springboot连接redis启动报错&#xff0c;感觉是没连上redis&#xff0c;本地是正常启动的&#xff0c;但是本地不是ssl连接。 2.redis ssl连接知识 ①一般不开启ssl的连接&#xff0c;直接连接即可&#xff0c;有密码输密码。 ②不受信的ssl连接&#xff0c;也就…

unity基础(二)

debug方法 Debug.Log(" 一般日志 ");Debug.LogWarning(" 警告日志 ");Debug.LogError(" 错误日志 ");// Player Informationstring strPlayerName "Peter";int iPlayerHpValue 32500;short shPlayerLevel 10;long lAdvantureExp 1…

越秀城投·星汇城 | 看得再多,都不如实景现房更安心

对于大多数家庭而言&#xff0c;买房是人生大事。经历了前几年房企暴雷、楼盘停工烂尾的风波&#xff0c;“现房”成为买房人心中最安心的代名词。无需再等待&#xff0c;所见即所得。 越秀城投星汇城位于平度南部新城核芯片区&#xff0c;不仅享受区域发展的利好&#xff0c;…

vs2019 里 C++ 20规范的 string 类的源码注释

&#xff08;1&#xff09;读源码&#xff0c;可以让我们更好的使用这个类&#xff0c;掌握这个类&#xff0c;知道咱们使用了库代码以后&#xff0c;程序大致具体是怎么执行的。而不用担心程序出不知名的意外的问题。也便于随后的代码调试。 string 类实际是 库中 basic_strin…

使用zdppy_amauth开发获取用户列表接口

服务端代码&#xff1a; 1、创建数据库连接对象2、初始化数据库3、声明一个上下文4、挂载用户相关的路由&#xff0c;这里主要由&#xff1a;登录&#xff0c;注册&#xff0c;获取用户列表5、启动服务 import mcrud import api import amauth import env import contextlibe…

【C#】与cpp异同总结

1.类外部调用类内的静态变量和静态成员 C#中类内定义的静态变量和静态方法&#xff0c;在类外访问是用类名.变量 或者 类名.方法 public class MyClass {public static int MyStaticVariable 10;public static void MyStaticMethod(){Console.WriteLine("This is a sta…

基于JAVAEE的停车场管理系统(论文 + 源码)

【免费】基于JAVAEE的停车场管理系统.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89292324 基于JAVAEE的停车场管理系统 摘 要 如今&#xff0c;我国现代化发展迅速&#xff0c;人口比例急剧上升&#xff0c;在一些大型的商场&#xff0c;显得就格外拥挤&…

elasticsearch脚本更新文档

模板 {"saleIncludeCustomers": [{"center": "分公司","code": "34234","launchId": "规则id"}],"centerIncludeCustomers": {"center1": [{"code": "1234567&quo…

每日两题 / 24. 两两交换链表中的节点 25. K 个一组翻转链表(LeetCode热题100)

24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 定义三个指针&#xff0c;交换前先保存ntnt指针为next->next&#xff0c;cur和next两个节点&#xff0c;然后将pre->next指向next 若pre为空&#xff0c;说明当前交换的节点为头两个节点&#xff0c;…

VM虚拟机安装调试(步骤如下图)

VM虚拟机安装调试 随着一顿安装操作&#xff0c;还有enter键敲下&#xff0c;出现如下界面。