Arkts开发父子组件创建和通信

Yetian_2000

已于 2024-07-22 10:11:21 修改

阅读量24

点赞数

分类专栏： Arkts 鸿蒙文章标签：前端 javascript 开发语言

于 2024-07-22 10:05:54 首次发布

本文链接：https://blog.csdn.net/Yetian_2000/article/details/140601784

版权

组件同页面文件的结构相同都加
@Entry和@Component修饰

父组件Parent.ets

import Child from './Child'
@Entry
@Component
struct Parent{
   

	build(){
   
		Comlumn(){
   
			Child({
   
				toChildData: "我是父参数"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yetian_2000

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Arkts开发父子组件创建和通信

Entry和@Component修饰。Button(“子组件按钮”)组件同页面文件的结构相同都加。父组件Parent.ets。子组件 Child.ets。
复制链接

扫一扫

专栏目录

Vue父子组件之间的通信实例详解

10-17

对于更复杂的跨级组件通信，可以创建一个全局的事件总线，或者当多个组件需要共享状态时，使用 Vuex 进行集中式管理。Event Bus 是一个简单的 Vue 实例，用于在非父子关系的组件间通信；Vuex 则是专门用来管理应用...

vue2.0父子组件及非父子组件之间的通信方法

08-31

3. **非父子组件通信** 对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用：首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```...

参与评论您还未登录，请先登录后发表或查看评论

vue记事本案例（父子组件通信）

08-20

在这个"vue记事本案例"中，我们重点探讨的是Vue.js中的父子组件通信，以及如何实现新增待办、删除待办（一键清空）、待办数量统计和持久化存储功能。首先，让我们关注父子组件通信。在Vue.js中，父子组件之间的...

React 父子组件通信的实现方法

10-15

1. **父组件向子组件通信** 父组件向子组件传递数据通常通过`props`完成。在给定的例子中，`App`组件是父组件，它拥有`msg`、`name`和`age`这三个状态（`state`）。当需要将这些数据传递给子组件`Child`时，我们...

vuejs中父子组件之间通信方法实例详解

10-15

总结，Vue.js中的父子组件通信涉及`props`用于从父向子传递数据，`$emit`用于子组件向父组件发送事件。此外，Vue Router帮助我们将组件与URL关联，实现页面的路由导航。理解并熟练掌握这些知识点对于开发Vue.js应用...

前端面试题日常练-day97 【Less】

qq_44640575的博客

07-20

354

border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。

TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！

OpenTiny的博客

07-17

1194

本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。

LG 选择 Flutter 来增强其智能电视操作系统 webOS

恋猫de小郭的博客

07-17

1684

总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？

博客前端项目学习day03——框架页

qq_53237241的博客

07-19

518

【代码】博客前端项目学习day03——框架页。

前端性能优化--懒加载

weixin_43799793的博客

07-19

156

3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/

[web]-反序列化-绕过__wakeup(转)

mails2008的专栏

07-18

329

终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。

vue3前端开发-如何让自己的网站适合SEO排名规则

yrldjsbk的博客

07-17

241

我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。

thinkphp8结合layui2.9 图片上传验证

quweiie的专栏

07-21

105

thinkphp8图片上传的验证

前端小项目-强调鼠标悬停时效果的名片

关注收藏，可以私信解决问题！

07-19

1039

在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。

web前端 React 框架面试200题（三）

最新发布

柯晓楠

07-21

288

纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。

Linux上的系统服务——DNS、WEB、NFS 和 AutoFS 服务的详细配置步骤

qq_68600196的博客

07-17

706

现有主机 node01 和 node02，完成如下需求：1、在 node01 主机上提供 DNS 和 WEB 服务2、dns 服务提供本实验所有主机名解析3、web服务提供 www.rhce.com 虚拟主机4、该虚拟主机的documentroot目录在 /nfs/rhce 目录5、该目录由 node02 主机提供的NFS服务共享6、该目录可以通过autofs服务实现自动挂载7、所有服务应该在重启之后依然可以正常使用。

前端使用webSocket与后台建立连接并进行心跳监测机制

On the way

07-18

423

2.在页面初始化的时候调用getWebSocket此方法。首先项目中需要引入websocket。

【芯片设计- RTL 数字逻辑设计入门番外篇 12 -- SoC 设计中的 ECO】

CodingCos的博客

07-17

614

在芯片设计中，ECO，工程变更订单）是一个关键的环节，用于在芯片设计后期对设计进行必要的调整和优化。ECO通常应用于数字芯片的版图设计，它是对设计的layout进行局部的小范围修改和重新布线的过程，而不影响设计的其他部分的布局布线。ECO的目的是为了节省时间和成本，特别是在芯片设计的后期阶段，当RTL（寄存器传输级）代码冻结后，通过ECO来修正设计中的问题。

了解 JSON Web 令牌 (JWT)

技术探索驿站

07-18

672

在现代 Web 开发领域，确保客户端和服务器之间的通信安全至关重要。JSON Web Tokens (JWT) 已成为确保安全高效数据交换的流行解决方案。本文将深入探讨 JWT 是什么、它们的工作原理以及它们为何对于 Web 应用程序中的安全身份验证和授权至关重要。JSON Web Token (JWT) 是一种紧凑且 URL 安全的表示双方之间传输声明的方式。

描述父子组件和非父子组件是怎么通信的

06-13

在Vue中，父子组件通信和非父子组件通信的方式是不同的。 1. 父子组件通信：父子组件之间的通信可以通过`props`和事件来实现。父组件可以通过`props`向子组件传递数据，子组件可以通过`$emit`触发事件并向父组件传递数据。比如，我们可以在父组件中向子组件传递一个名字：父组件： ```vue <template> <div> <child-component :name="name" @update-name="updateName"></child-component> </div> </template> <script> import ChildComponent from "@/components/ChildComponent.vue"; export default { components: { ChildComponent, }, data() { return { name: "Vue", }; }, methods: { updateName(newName) { this.name = newName; }, }, }; </script> ``` 子组件： ```vue <template> <div> <p>My name is {{ name }}</p> <button @click="changeName">Change Name</button> </div> </template> <script> export default { props: { name: String, }, methods: { changeName() { this.$emit("update-name", "React"); }, }, }; </script> ``` 2. 非父子组件通信：非父子组件之间的通信需要借助一个中央事件总线（event bus）来实现。可以在Vue实例中创建一个事件总线，并通过`$emit`触发事件，通过`$on`监听事件。比如，我们可以在一个组件中触发一个事件，另一个组件中监听这个事件： ```vue // Event Bus const eventBus = new Vue(); // Component A <template> <div> <button @click="emitEvent">Emit Event</button> </div> </template> <script> export default { methods: { emitEvent() { eventBus.$emit("event-name", "Event Data"); }, }, }; </script> // Component B <template> <div> <p>{{ eventData }}</p> </div> </template> <script> export default { data() { return { eventData: "", }; }, mounted() { eventBus.$on("event-name", (data) => { this.eventData = data; }); }, }; </script> ``` 这样，当在组件A中点击按钮时，会触发一个名为`event-name`的事件，并向事件总线传递一个数据。组件B中监听这个事件，并在事件回调中更新数据。这样就实现了非父子组件之间的通信。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交