父子组件通信

随着组件化开发的盛行,前端开发必备技能之一是父子组件通信。本文详细介绍了在实际开发中,在微信小程序、vue2、vue3技术栈开发项目中父子组件通信的用法。

特性/框架微信小程序Vue 2Vue 3
通信方式父传子:通过 properties 子传父:通过 triggerEvent父传子:通过 props 子传父:通过 emit$on(或使用事件总线)父传子:通过 props 子传父:通过 emitv-on(或使用 provideinject
用法父组件:<child my-prop="{{parentData}}" /> 子组件:properties: { myProp: { type: String } } 子组件触发事件:this.triggerEvent('myEvent', { data: 'some data' });父组件:<child :my-prop="parentData" @my-event="handleEvent" /> 子组件:props: ['myProp'] 子组件触发事件:this.$emit('myEvent', 'some data');父组件:<child :my-prop="parentData" @my-event="handleEvent" /> 子组件:defineProps(['myProp']) 子组件触发事件:defineEmits(['myEvent'])( 'some data');
异同点- 小程序使用 propertiestriggerEvent - 事件传递通过 triggerEvent,不支持自定义事件系统- 使用 props$emit - 支持自定义事件系统,可以使用事件总线进行跨组件通信- 使用 propsemit - 支持自定义事件系统,但推荐使用 provideinject 进行跨层级通信
注意事项- 属性默认值和类型需要在 properties 中声明 - 事件名需要遵循驼峰命名法- props 需要显式声明 - 使用 $emit 时,事件名需要遵循驼峰命名法 - 事件总线可能导致组件间耦合度增加- props 需要使用 defineProps 声明 - 使用 emit 时,事件名需要遵循驼峰命名法 - provideinject 用于跨层级通信,但需谨慎使用以避免过度耦合
微信小程序中的父子通信

在微信小程序中,父子组件通信主要通过以下方式实现:

  1. 父组件向子组件传递数据:通过在子组件的标签上使用properties属性来声明需要接收的数据。
  2. 子组件向父组件传递数据:通过triggerEvent方法来触发自定义事件,父组件监听这些事件来接收数据。

父传子(数据传递):

// 父组件
<child-component my-property="{{parentData}}"></child-component>// 子组件
Component({properties: {// 属性名myProperty: {  // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)type: String,      // 属性初始值(可选),如果未指定则会根据类型选择一个value: 'default value' }}
})

子传父(事件传递):

// 子组件
this.triggerEvent('myevent', { myData: 'some data' });// 父组件
<child-component bindmyevent="handleEvent"></child-component>
Page({handleEvent: function(e) {// 输出子组件传递的数据console.log(e.detail); }
})
Vue2中的父子通信

在Vue2中,父子组件通信主要通过以下方式实现:

  1. 父组件向子组件传递数据:通过在子组件标签上使用v-bind或简写:来传递数据。
  2. 子组件向父组件传递数据:通过在子组件中使用this.$emit来触发自定义事件,父组件监听这些事件来接收数据。

父传子(数据传递):

// 父组件
<child-component :my-prop="parentData"></child-component>// 子组件
props: ['myProp']

子传父(事件传递):

// 子组件
this.$emit('myEvent', 'some data');// 父组件
<child-component @my-event="handleEvent"></child-component>
methods: {handleEvent(data) {// 输出子组件传递的数据console.log(data); }
}

Vue3中的父子组件通信

在Vue3中,父子组件通信的方式与Vue2类似,但有一些新的特性,如definePropsdefineEmits,这些是编译时的宏,用于声明props和emits。

父传子(数据传递):

// 父组件
<child-component :my-prop="parentData"></child-component>// 子组件
const props = defineProps({myProp: String
});

子传父(事件传递):

// 子组件
const emit = defineEmits(['myEvent']);
emit('myEvent', 'some data');// 父组件
<child-component @my-event="handleEvent"></child-component>
methods: {handleEvent(data) {console.log(data); // 输出子组件传递的数据}
}

异同点总结

  • 相同点:

    • 都支持通过属性(properties/props)向子组件传递数据。
    • 都支持通过事件(events/$emit)从子组件向父组件传递消息。
  • 不同点:

    • 微信小程序使用Component构造函数来定义组件,而Vue使用Vue.component或单文件组件。
    • Vue3提供了组合式API,使得组件的定义和通信更加灵活和模块化。

关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓

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

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

相关文章

43-5 waf绕过 - 安全狗简介及安装

一、安全狗安装 安装安全狗需要开启 Apache 系统服务。如果 Apache 系统服务未开启,安装过程中可能会出现无法填入服务名称的问题,导致无法继续安装。为避免此问题,可以先在虚拟机中安装 PHPStudy。 安装PHPStudy 下载、安装phpstudy并启动(安装过程可以一路下一步,也…

安装VS2017后,离线安装Debugging Tools for Windows(QT5.9.2使用MSVC2017 64bit编译器)

1、背景 安装VS2017后&#xff0c;Windows Software Development Kit - Windows 10.0.17763.132的Debugging Tools for Windows默认不会安装&#xff0c;如下图。这时在QT5.9.2无法使用MSVC2017 64bit编译器。 2、在线安装 如果在线安装参考之前的文章&#xff1a; Qt5.9.2初…

Windows操作系统提权之系统服务漏洞提权Always Install Elevated

Always Install Elevated 1.形成原因 任意用户以NT AUTHORITY\SYSTEM权限安装 i。 AlwaysInstallElevated是一个策略设置&#xff0c;当在系统中使用Windows Installer安装任何程序时&#xff0c;该参数允许非 特权用户以system权限运行MSI文件。如果目标系统上启用了这一设…

leetcode - 20.有效的括号(LinkedHashMap)

leetcode题目有效的括号&#xff0c;分类是easy&#xff0c;但是博主前前后后提交了几十次才通过&#xff0c;现在记录一下使用Java语言的写法。 题目链接: 20.有效的括号 题目描述&#xff1a; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&…

【漏洞复现】WordPress Country State City Dropdown CF7插件 SQL注入漏洞(CVE-2024-3495)

0x01 产品简介 Country State City Dropdown CF7插件是一个功能强大、易于使用的 WordPress 插件&#xff0c;它为用户在联系表单中提供国家.州/省和城市的三级下拉菜单功能&#xff0c;帮助用户更准确地填写地区信息。同时&#xff0c;插件的团队和支持也非常出色&#xff0c…

香橙派 Kunpeng Pro使用教程:从零开始打造个人私密博客

一、引言 在这个日益互联的世界中&#xff0c;单板计算机已经成为创新和个性化解决方案的重要载体。而在单板计算机领域&#xff0c;香橙派 Kunpeng Pro凭借其强大的性能和灵活的应用潜力&#xff0c;正逐渐吸引着全球开发者和技术爱好者的目光。 作为一款集成了华为的鲲鹏处…

单调栈原理+练习

首先用一道题引出单调栈 码蹄集 (matiji.net) 首先画一个图演示山的情况&#xff1a; 最暴力的做法自然是O(n方)的双循环遍历&#xff0c;这么做的思想是求出当前山右侧有多少座比它小的山&#xff0c;遇见第一个高度大于等于它的就停止。 但是对于我们所求的答案数&#xff…

codefun的蓝桥杯国赛之旅

前言 好久没有刷算法了&#xff0c;今天完成了我的蓝桥杯国赛之旅&#xff01; 总的来说&#xff0c;比赛的过程不是很顺利&#xff0c;只能ac两道题目&#xff0c;好多题都是有思路&#xff0c;但是要么是写不出来&#xff0c;要么是debug不出来&#xff0c;多重背包&#xf…

Docker(Centos7+)

先确定是否 Centos 7 及以上的版本 查看是否 ping 通外网 linux centos7运行下面的代码&#xff0c;基本上都可以正常安装 # 删除之前的docker残留 yum -y remove docker*yum install -y yum-utilsyum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/…

Controller类明明写了@CrossOrigin跨域注解,但还是有跨域问题

可能是写的过滤器干扰到了跨域处理。如&#xff1a; 此时&#xff0c;先注释掉过滤器注解&#xff0c;让其不生效&#xff0c;就可以避免干扰跨域处理了 不过&#xff0c;这只能暂时解决该问题&#xff0c;毕竟过滤器还是要用的&#xff0c;后续我再探索一下。。。。。。。

软设之冒泡排序

冒泡排序 冒泡排序的基本思想是通过相邻元素之间的比较和交换&#xff0c;将排序较小的元素逐渐从底层移向顶部。整个排序过程元素像气泡一样逐渐向上冒&#xff0c;因此叫冒泡排序。 比如说有数组 57&#xff0c;68&#xff0c;59&#xff0c;52 第一个元素和第二个元素比较…

[个人笔记] 记录docker-compose使用和Harbor的部署过程

容器技术 第三章 记录docker-compose使用和Harbor的部署过程 容器技术记录docker-compose使用和Harbor的部署过程Harborhttps方式部署&#xff1a;测试环境部署使用自签名SSL证书https方式部署&#xff1a;正式环境部署使用企业颁发的SSL证书给Docker守护进程添加Harbor的SSL证…

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

Flutter 中的 MediaQuery 小部件&#xff1a;全面指南 Flutter 是一个流行的跨平台 UI 框架&#xff0c;它允许开发者使用 Dart 语言构建高性能、美观的应用。在 Flutter 中&#xff0c;响应式设计是一个核心概念&#xff0c;MediaQuery 小部件在其中扮演了重要角色。MediaQue…

ctfshow unserialize

开始反序列化 web255 是从cookie中unserialize得到实例&#xff0c;考虑修改cookie中键user的值 $result urlencode(serialize(new ctfShowUser())); 为何需要url编码呢&#xff0c;不url编码也能成。url编码是对称加密&#xff0c;编码也不影响 web256 考察!不完全等于&…

Ollama+OpenWebUI+Phi3本地大模型入门

文章目录 OllamaOpenWebUIPhi3本地大模型入门一、基础环境二、Ollama三、OpenWebUI Phi3 OllamaOpenWebUIPhi3本地大模型入门 完全不懂大模型的请绕道&#xff0c;相信我李一舟的课程比较适合 Ollama提供大模型运行环境&#xff0c;OpenWebUI提供UI&#xff0c;Phi3就是那个大…

【学习】自动化测试与单元测试框架的差异化解析

在软件开发的世界中&#xff0c;质量保证是构建可靠、健壮应用程序的关键一环。在这个过程中&#xff0c;自动化测试和单元测试框架是确保代码质量的两种重要工具。尽管它们在目标上有着共同点——提高软件测试的效率和有效性&#xff0c;但它们在应用场景、功能特点以及实现方…

mongodb数据库查询调优之explain方法详解

在MongoDB中&#xff0c;explain()方法可以帮助我们了解查询语句的执行计划和性能。通过分析explain()的结果&#xff0c;我们可以找出潜在的性能问题并对其进行优化。 以下是使用explain()方法对MongoDB查询语句进行优化的步骤&#xff1a; 使用explain()方法获取查询的执行计…

Vue基础知识:vue3 对于 ref 值的类型定义

vue3 对于 ref 值的类型定义 从 vue2 到 vue3 之后&#xff0c;所有变量值都需要添加 ref() const name ref(kyle)意思是 vue3 变量由 vue 来控制&#xff0c;上面的 name 变量值并不是原始的字符串 kyle 而是被套了一层类型为 Ref 的对象。 使用的时候 console.log(name.v…

微信小程序怎么进行页面传参

微信小程序页面传参的方式有多种&#xff0c;每种方式都有其特定的使用场景和优势。以下是几种常见的页面传参方式&#xff0c;以及它们的具体使用方法和示例&#xff1a; URL参数传值 原理&#xff1a;通过在跳转链接中附加参数&#xff0c;在目标页面的onLoad函数中获取参数…

Day45 动态规划part05

LC1049最后一块石头重量II(未掌握) 未掌握分析&#xff1a;其实本题跟LC416分割等和子集类似&#xff0c;本质上题目的要求是尽量让石头分成重量相同的两堆&#xff0c;相撞之后剩下的石头最小&#xff0c;也就是01背包问题weight和value都是stones数组&#xff0c;题目可以看…