14天速成小程序开发：第三章UniApp组件通信

已于 2024-06-02 08:55:57 修改
阅读量265 收藏 3
点赞数 10
分类专栏： 14天速成小程序开发 文章标签： uni-app vue
于 2024-06-01 21:59:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WYyanyufei/article/details/139375725
版权

文章目录

前言

上一章我们学习并创建了navbar组件，但是缺少灵活互动性，本章我们将会学习组件之间的通信

一、父传子（props）

1.创建变量

在这里插入图片描述
在这里插入图片描述

2.props接收

vue3官方文档
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1f7242407b564a2
在这里插入图片描述

二、子传父（emit）

修改子组件，不能在子组件内部修改，需要通知父组件，在父组件内进行修改

1.在父组件内定义事件和创建函数

在这里插入图片描述

2.子组件内通过事件调用

在这里插入图片描述

emits的声明和调用，详见vue语法
vue.js.官网

三、效果演示

在这里插入图片描述
在这里插入图片描述

四、插槽语法

适用于即传递数据，又传递结构的场景
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

雁于飞
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序|页面传参的三种方式
m0_59259076的博客
03-18 465
要正确展示文章详情页面的内容，首先需要将文章的id号由post页面传递到post-detail页面，这样，post-detail页面才能知晓它要显示哪篇文章。这涉及页面间的参数传递与通信。目前，在MNA框架中有以下几种参数传递方式： 使用全局变量（关于全局变量，本书后面的章节中会讲到）； 使用缓存； 通过页面导航url的query参数传递。 基本上参数的传递只有以上3种方式，其他的比如像事件信号的传参方式（一个页面emit 发送信号，一个页面on监听信号，这种在AngularJS里很常见的传参方式，小
微信小程序之uniapp与微信小程序原生框架的通信
m0_71796330的博客
03-15 1043
​ 这是我第一次学习微信小程序，在使用Hbuilder做黑马优购的时候想使用微信原生的组件来美化或者优化小程序的页面时，难到一些坑，在次记录一下，网上关于这种在uniapp下使用微信小程序的文章甚少，故我在此书文，让更多的人少走弯路。​ 微信小程序自定义组件要想被uniapp项目所使用，就要把它引入到全局配置文件（pages.json）下，对应的wxss也要导入App.vue下，最后以标签的形式插入父组件中，
【干货】Vue3 组件通信方式详解
最新发布
qq_16066907的博客
06-26 614
毫无疑问，组件通信是Vue中非常重要的技术之一，它的出现能够使我们非常方便的在不同组件之间进行数据的传递，以达到数据交互的效果。所以，学习组件通信技术是非常有必要的，本文将总结Vue中关于组件通信的八种方式，帮助大家在使用Vue的过程中更加得心应手！如果文中有不对、疑惑的地方，欢迎在评论区留言指正！！在开始之前我们需要明白什么是组件通信，组件通信组件通信都知道组件是vue最强大的功能之一，vue中每一个.vue文件我们都可以视之为一个组件，简单来说组件就是对UI结构的复用。
uniapp--微信小程序页面数据传递
find1star的博客
08-19 1366
注：此方法只支持跳转页面类型的信息传递 对于微信小程序的开发 我在使用uniapp的 $on 与 $emit 时遇到了数据传递无效、监听不到第一次传递数据等情况，应该是个BUG解决方法如下
关于原生小程序中$emit的使用
weixin_44611706的博客
08-13 5406
关于原生小程序中$emit的使用 关于$emit的用法 它的功能为：$emit子组件调用父组件的方法并传递数据 实例： 子组件中，js代码中调用以下语句，这里双引号中的changeShow对应了下图父组件中@后面的changeShow，false和userInfo则为要传递的对象。 this.$emit("changeShow",false,userInfo) 父组件中，前端： 这里，LoginWindow为父组件的名称，需要在components中申明。 <LoginWindow @cha
微信小程序传值的方法
yheartbeats的博客
10-22 2171
微信小程序传值的方法 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进
微信小程序开发教程—逻辑层js详解
03-29
　微信小程序开发框架的逻辑层是由JavaScript编写。在JavaScript的基础上，微信团队做了一些适当的修改，以便提高开发小程序的效率。主要修改包括： 　:diamond_suit: 增加app和page方法，进行程序和页面的注册 　:...
小白电影影视解说7天速成法视频课程下载整理.zip
08-20
《小白电影影视解说7天速成法》视频课程是一套专为初学者设计的教育资料，旨在帮助对电影和影视解说感兴趣的爱好者在短时间内快速掌握基本技能。通过这门课程，学员将了解到影视解说的各个环节，从选片、分析剧本、...
淘宝大学：六小灵童5天学会PS第3天修图美化（13课）
07-23
教程名称： 淘宝大学：六小灵童5天学会PS 第3天修图美化（13课）【】六小灵童 30分钟学会PS 图片美化.flv18.1M【】六小灵童 30分钟学会PS 海报设计.flv35.5M【】六小灵童 PS速成 图片美化流程.flv18.8M【】六小灵童...
微信小程序学习第一天，第二天
03-29
第一天 全局入口文件 程序入口文件是 app.js，内容可以为空 程序全局信息在 app.json 里配置，包括：路由，界面颜色 程序全局样式在 app.wxss 里配置，内容可以为空 pages 目录 pages/index/index.js let param = { ...
revit教程三天速成光盘说明共1页.pdf.zip
11-22
第三天的课程可能侧重于Revit的协同工作和分析功能。Revit支持链接外部CAD文件和IFC格式数据，实现与其他设计软件的数据交换。此外，将介绍如何进行结构分析、能源分析以及碰撞检测，这些都是BIM流程中的重要环节。...
Vue3-新增选项-emits
热门推荐
qq_41872385的博客
03-15 1万+
前言：emits是Vue3新增的选项，emits主要作用在子组件中，用于接收在父组件中绑定的方法。其实在Vue2中本身就可以实现触发父组件中绑定在子组件上的事件，只不过不像prop接收变量那么清晰，Vue3中新增emits这一选项使得子组件绑定的事件更加清晰，更加方便维护，同时使用方式也有变化，下面会详细介绍两个大版本关于组件监听的前后异动。
最速C++开发APP路线【速成】
restore_1的博客
02-17 437
技能 学习时间 说明 C++基础知识 1-3个月 学习C++语法和面向对象编程基本概念 移动应用开发框架 2-4周 了解常用移动应用开发框架（例如React Native或Flutter） 用户界面设计 1-2周 学习移动应用用户界面设计原则和工具（如Sketch或Adobe XD） 移动应用前端开发 2-4个月 学习使用框架和工具开发移动应用前端界面 移动应用后端开发 1-3个月 学习使用服务器端框架和数据库开发移
小程序页面间通信——EventChannel（数据量多时）
csdn_823的博客
08-18 1790
小程序页面间通信——EventChannel（数据量多时）
小程序页面之间数据传递的四种方法
weixin_44514665的博客
06-03 9656
小程序页面数据传递，怎么从父页面传递数据到子页面，子页面传递数据到父页面
微信小程序Wepy框架的三个事件交互($broadcast，$emit，$invoke)
weixin_30296405的博客
06-28 229
$broadcast： $broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序，如上图，如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图 理解官方意...
手把手教你快速入门 APP 的开发
GitChat
02-15 4454
论及每年的编程语言排行榜， Java 总是名列榜首，流行意味着好用，我们当了解之。 当今生活，最体现科技的地方便是电子产品。而电子产品中，我们接触最多、最离不开的便是手机。手机之所以成为“手机”，决定性因素便是里面的一个个程序。安卓手机受众最多，安卓开发使用最普及的便是 Java 语言。所以，我们需要学习 Java， 学习它最好的方式就是试着去做安卓开发。 本场 Chat 适合以下人群，若非，请绕...
微信小程序8种数据通信的方式
weixin_48073878的博客
01-14 1364
微信小程序8种数据通信的方式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值