Vue 2和Vue 3父子组件通信总结

Vue 2和Vue 3在父子组件通信方面提供了多种方法,这些方法各有特点和适用场景。以下是对这两个版本在父子通信方面的总结和归纳:

Vue 2

  1. 父传子
    • 使用props:父组件通过标签属性将数据传递给子组件,子组件通过props选项接收数据。
    • 使用ref$refs:父组件给子组件加上ref属性,然后在父组件中通过this.$refs.子组件访问子组件实例,直接调用子组件的方法或属性。
    • 使用:属性.sync:Vue 2.3.0+新增的语法糖,用于子组件修改父组件的属性值(需配合this.$emit('update:属性', 新值))。
    • 示例代码                                                                                                                        <!-- 父组件 -->  
      <template>  
        <child-component :myProp="value"></child-component>  
      </template>  
      <script>  
      export default {  
        data() {  
          return {  
            value: 'Hello from parent'  
          };  
        }  
      };  
      </script>  
       
      <!-- 子组件 -->  
      <template>  
        <div>{{ myProp }}</div>  
      </template>  
      <script>  
      export default {  
        props: ['myProp']  
      };  
      </script>
  2. 子传父
    • 使用$emit:子组件通过调用内建的$emit方法并传入事件名称来触发一个事件,父组件可以通过v-on:@方法监听子组件的自定义事件,并在事件回调函数中处理数据。
    • 使用$parent:子组件可以通过this.$parent访问父组件,但这种方式并不常用,因为它可能导致组件的耦合性过高。
    • 示例代码                                                                                                                          <!-- 子组件 -->  
      <template>  
        <button @click="sendDataToParent">Send Data</button>  
      </template>  
      <script>  
      export default {  
        methods: {  
          sendDataToParent() {  
            this.$emit('myEvent', 'Hello from child');  
          }  
        }  
      };  
      </script>  
       
      <!-- 父组件 -->  
      <template>  
        <child-component @myEvent="handleData"></child-component>  
      </template>  
      <script>  
      export default {  
        methods: {  
          handleData(data) {  
            console.log(data); // 输出 'Hello from child'  
          }  
        }  
      };  
      </script>

Vue 3

Vue 3在组件通信方面引入了一些新的API和概念,但基本的父子通信方式与Vue 2类似,同时也有一些新的改进和特性。

  1. 父传子
    • 使用defineProps:Vue 3的Composition API中的defineProps函数用于定义组件的props。父组件通过标签属性将数据传递给子组件,子组件使用defineProps接收数据。
    • 使用reactiveref:Vue 3中,可以使用reactiveref创建响应式数据,并在父组件中通过标签属性传递给子组件。
  2. 子传父
    • 使用defineEmits:Vue 3的Composition API中的defineEmits函数用于定义组件可以触发的自定义事件。子组件通过调用emit函数并传入事件名称和参数来触发事件,父组件可以通过v-on:@方法监听子组件的自定义事件。
    • 使用defineExpose:子组件可以使用defineExpose主动暴露其方法或属性给父组件,父组件通过ref$refs访问子组件实例,然后调用这些暴露的方法或属性。

总结

Vue 2和Vue 3在父子组件通信方面提供了多种方法,包括使用props$emitref$refs:属性.syncdefinePropsdefineEmitsdefineExpose等。这些方法各有特点和适用场景,开发者可以根据项目的具体需求选择最适合的通信方式。同时,Vue 3的Composition API为组件通信提供了更多的灵活性和选择性。

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

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

相关文章

树莓派4B 零起点(一) 树莓派 无屏 从购买到启动

目录 背景 一. 准备工作 二、烧录系统 三、连接系统 背景 准备开发ROS机器人&#xff0c;在淘宝上购买的树莓派4B(4G)到货了&#xff0c;配件都很齐全&#xff0c;那么就直接开箱验货。 一. 准备工作 1 、硬件&#xff1a;(如下图) (我的购买链接: 树莓派4B 4g 套件) 2…

Java Web学习笔记26——Element常用组件

常见组件&#xff1a; 就是一个复制和粘贴的过程。 Table表格&#xff1a;用于展示多条结构类的数据&#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。 常见组件-分页主键&#xff1a; Pagination&#xff1a;分页&#xff1a;当数据量比较多时&#xff0c;使用分…

MyBatis一级和二级缓存介绍

MyBatis是一个持久层框架&#xff0c;它提供了一级缓存和二级缓存来提高数据库操作的性能。下面是一级缓存和二级缓存的区别理解、画图和知识点总结&#xff1a; 一级缓存&#xff1a; 一级缓存是MyBatis默认开启的缓存层&#xff0c;它是SqlSession级别的缓存&#xff0c;也…

【WEB前端2024】智体OS:poplang编程控制成本小千元的长续航robot机器人底盘(开源)

【WEB前端2024】智体OS&#xff1a;poplang编程控制成本小千元的长续航robot机器人底盘&#xff08;开源&#xff09; 前言&#xff1a;dtns.network是一款主要由JavaScript编写的智体世界引擎&#xff08;内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆&#xff09;…

网页文档下载不了怎么办 网页文档下载方法

一个方法&#xff0c;搞定所有网页文档下载。如果你也需要从网页下载各种文档&#xff0c;那么本文一定可以帮到你。无须充值会员&#xff0c;各大平台文档下到爽。看到就是赚到&#xff0c;还不赶快学起来。有关网页文档下载不了怎么办&#xff0c;网页文档下载方法的问题&…

端午与高考的交汇点:家的温暖与梦想的起点

当端午节的粽香弥漫在街头巷尾&#xff0c;高考的脚步也悄然而至。这两个看似毫无关联的时刻&#xff0c;却在每年的六月&#xff0c;奇妙地交汇在一起&#xff0c;为我们带来了一段特别的记忆。这不仅是家的温暖与梦想的起点相遇的时刻&#xff0c;更是传统文化与现代追求共融…

Redis进阶知识个人汇总

持久化 三种方式实现它的持久化&#xff1a; RDB持久化 全称Redis数据备份文件&#xff0c;又称Redis数据快照 这种就是将Redis内存中所有数据记录到磁盘中&#xff0c;当实例出故障后&#xff0c;从磁盘中读快照文件进行恢复数据。 一般使用bgsave指令实现 复制主线程得到一…

记一次源码部分丢失后补救过程

起因 最近植物大战僵尸杂交版玩的入迷&#xff0c;写了一个“神奇”小工具&#xff0c;来辅助游戏。用Git新建一个库&#xff0c;想把代码备份到GitHub&#xff0c;结果push错库了&#xff0c;无奈reset&#xff0c;结果把本地项目一起reset了&#xff0c;结果就是源代码丢失。…

k8s——secret配置资源管理

一、Secret 1.1 Secret定义 Secret是用来保存密码、token、密钥等敏感数据的k8s资源&#xff0c;这类数据虽然也可以存放在Pod或者镜像中&#xff0c;但是放在Secret中是为了更方便的控制如何使用数据&#xff0c;并减少暴露的风险。 1.2 Secret类型 kubernetes.io/service-ac…

D365 通过x++创建销售订单

文章目录 创建销售订单 创建销售订单 SalesTable salesTable; SalesLine salesLine; NumberSeq numberSeq;ttsBegin; //creating sales order header //getting sales order id from number sequence numberSeq NumberSeq::newGetNum(SalesParameters::numRefSalesId()); num…

w801编程入门:探索高效与创新的编程之旅

w801编程入门&#xff1a;探索高效与创新的编程之旅 在数字化快速发展的今天&#xff0c;编程已经成为一项必备的技能。而w801编程&#xff0c;作为新兴的编程领域&#xff0c;正以其高效和创新的特点吸引着越来越多的开发者。本文将带领您从四个方面、五个方面、六个方面和七…

SpringBoot+Vue网上超市系统(前后端分离)

技术栈 JavaSpringBootMavenMySQLMyBatisVueShiroElement-UI 系统角色对应功能 用户管理员 系统功能截图

03-3.3.3 栈在递归中的应用

&#x1f44b; Hi, I’m Beast Cheng&#x1f440; I’m interested in photography, hiking, landscape…&#x1f331; I’m currently learning python, javascript, kotlin…&#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以订…

为你的网站安装免费的 SSL TLS 证书

文章目录 前言准备工作证书申请证书安装Nginx配置 前言 申请了很久的域名没有用起来怎么行呢&#xff1f;而访问安全需要获得一个可信的https证书颁发机构的认证&#xff0c;这其实是一个提升你网站可信度的方法&#xff0c;有很多的证书颁发机构&#xff0c;收费也高低不等&a…

利用Redis的队列模式实现消息的发送和订阅,适合分布式场景,Java实现代码

在Redis中&#xff0c;通常使用发布/订阅模式&#xff08;Pub/Sub&#xff09;来进行消息的实时通信。然而&#xff0c;标准的Redis发布/订阅模式并不直接支持确保一条消息只被一台机器消费。在这种模式下&#xff0c;所有订阅了特定频道的客户端都会收到发布的消息。 但是&…

Cesium项目报错An error occurred while rendering. Rendering has stopped.

一般就是本地打开会报错&#xff0c;改成用本地服务器打开 全局安装一个live-server sudo cnpm i live-server -g然后新增一个package.json文件 npm init -y然后在package.json的scripts中增加一个命令 "server": "live-server ./ --port8181 --hostlocalhos…

AI图书推荐:用ChatGPT来写非虚构类书籍

这本书《用ChatGPT来写非虚构类书籍 》&#xff08;ChatGPT For KDP_ A manual from an experienced self-publisher to nonfiction authors for writing the book you were born to write with ChatGPT prompts mastering&#xff09;是一本专为非虚构类书籍作者编写的指南&am…

实习记录2

1.flowable框架参数传递大概流程 通过传递xml&#xff0c;传递到后端&#xff0c;然后后端去解析 2.vue封装组件 在 Vue.js 中创建可复用的自定义组件是一个常见的需求&#xff0c;这样可以提高代码的复用性和可维护性。下面是一个简单的步骤指南&#xff0c;帮助你创建一个…

MLC工具是否适用AMD和ARM场景?如何测试内存性能?

MLC&#xff08;Memory Latency Checker&#xff09;主要是由Intel开发的工具&#xff0c;主要用于Intel平台上的内存性能测试&#xff0c;尤其是针对Intel处理器的内存延迟和带宽。尽管MLC主要针对Intel处理器设计&#xff0c;理论上它可以在任何支持Intel兼容指令集的系统上运…

嵌入式linux系统中利用I2C控制器应用开发详解

大家好,今天主要给大家分享一下,在linux系统上如何使用I2C进行应用开发详解。 l2C (Inter一Integrated Circuit BUS)是I2C BUS简称.中文为集成电路总线.是目前应用最广泛的总线之一。和IMX6ULL有些相关的是.刚好该总线是NXP前身的PHLIPS 设计。 第一:I2C协议概述 …