微信小程序之实现父子组件通信

已于 2022-01-19 09:43:51 修改
阅读量598 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序
于 2021-12-30 16:07:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45695853/article/details/122238700
版权

简单需求：封装一个导航组件，在页面引入，导航标题由父组件传递过去，子组件通过properties来接收，点击当前标题添加上类名，最后渲染到页面中，如下效果图：
在这里插入图片描述
父组件
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
子组件
在这里插入图片描述
在这里插入图片描述

总结：父组件传递给子组件的参数通过properties来接受，子组件传递给父组件的参数通过事件this.triggerEvent(“事件名”，{})，修改data里面的数据必须通过this.setData({})来进行修改

吃葡萄不吐葡萄皮嘻嘻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序 树形菜单组件_v2
07-20
微信小程序 树形菜单组件 v2 需属性传值 listData（树形菜单数据） listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： <wxTreeList listData="{{listData}}"></wxTreeList>
微信小程序封装上传文件组件
03-10
微信小程序封装上传文件组件，只适用于单独上传图片，不携带参数，结合后端接口返回路径之后，再调用另外的保存接口，携带参数与图片提交的场景，请慎重使用。
微信小程序：父子组件传值
weixin_42017221的博客
02-08 1075
在父组件监听事件。
微信小程序中的父子组件通信（详细）
最新发布
MYmayue的博客
03-26 516
父组件向子组件传参首先定义子组件 微信小程序中定义组件一般我们定义在components文件中 在app.json中 创建"pages": [],之后在父组件中引入子组件 首先在父组件的json中直接引入.json在wxml页面中使用双标签 后在子组件的json中设置这样组件引用完成；
小程序问题：怎样快速上手微信小程序开发
m0_74802419的博客
01-04 151
今天要和大家分享的是关于微信小程序的问题，主要是阐述一下其最重要的一些技术点，让初学微信小程序开发的朋友，能够快速的上手做东西，以及对于之前接触过小程序的朋友，也能够起到快速回顾复习的目的。而对于其他进阶技术点，可以在此基础上，在做项目的过程中，进行补充学习，效率刚刚的。：a标签。: template标签，只能控制，不能加样式。：图片。
小程序中父子组件间的通信与事件
weixin_30767835的博客
09-20 142
点此查看微信小程序官方文档 以下示例，可自行体会.. 子 -Component child.json { "component": true, "usingComponents": {} } child.wxml <view class='template-child'> <block wx:for='{{da...
【微信小程序】父子组件的创建、通信与事件触发；组件生命周期
记录
09-02 1329
父组件传值给子组件:子组件properties接收子组件传值给父组件：子组件this.triggerEvent()激发传给父组件父组件调用子组件的方法：父组件使用this.selectComponent 获取子组件的实例对象子组件调用父组件的方法:子组件this.triggerEvent()激发传给父组件可以看出来如果是子组件要想与父组件通信，无论是传参还是调用方法，都可以通过this.triggerEvent()实现。传参也只是调用方法的一种特殊情况而已。
微信小程序父子组件通信
cc_xxo的博客
02-16 2513
父子组件之间有3种通信方式 1、属性绑定 用于父组件向子组件的指定属性设置数据，只能传递普通类型的数据，无法将方法传递给子组件 2、事件绑定 用于子组件向父组件传递数据，可以传递任意数据 ①在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件 ②在父组件的wxml中，通过自定义事件的形式，将步骤①中定义的函数引用，传递给子组件 ③在子组件的js中，通过调用this.triggerEvent('自定义事件名称', {/*参数对象*/})，将数据发送到父组件 ④在父组件的js
【微信小程序--父子通信3种方式】
github_39096247的博客
05-06 196
父组件还可以通过 this.selectComponent() 获取子组件实例对象这样就可以直接访问子组件的任意数据和方法。示例：父组件 传递给 子组件一个数字count，子组件有个按钮，点击一次 数字count +1，用于父组件向子组件的指定属性设置数据，仅能设置JSON 兼容的数据。用于子组件向父组件传递数据，可以传递任意数据。
小程序菜鸟的父子组件传值、父子组件方法调用的学习
lm13420109892的博客
08-12 534
父子组件传值 父组件给子组件传值 wxml: 父组件.wxml： <view> <child title="我是父组件传进来的标题"/><child /> </view> 子组件.wxml： <view class="child">{{title}}</view> 子组件在.js中的properties接收父组件传给子组件的数据： properties: { // title:String
微信小程序-倒计时组件
06-24
1、倒计时里面包含功能：将后台时间戳转换成相应的时间、进行时间的倒计 2、该文件直接可以下载组件，下载后直接调用即可 3、调用方法简单 3、初学者必备 4、该组件常用：支付页面、活动倒计时等。
微信小程序 树形菜单组件
01-30
微信小程序 树形菜单组件 存放路径：/components/treeList/treeList listData数据格式:[{title:'A层级菜单1',children:[]},{title:'A层级菜单2',children:[]}] 使用： ...
微信小程序 用户反馈组件 (源码)
05-31
微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈组件 (源码)微信小程序 用户反馈...
微信小程序----父子组件之间通信
拒绝躺平，适当内卷
11-10 2045
微信小程序----父子组件之间通信
微信小程序 父子组件
林一怂儿
07-09 417
组件引用 全局引用 在app.json中引用则该组件为全局组件，供每个页面调用该组件 页面或组件引用 在对应页面或者组件的json文件种添加 页面布局 index/index.wxml <view>index</view> <parent></parent> parent/index.wxml <view>parent</view> <child></child> child/index.wxml &
微信小程序 关于父子组件一些心得
weixin_33801856的博客
03-02 1074
父子组件样式的设置 1、 如何对父子组件设置flex布局 如果在小程序中对父组件设置 display:flex 或者 display:inline-flex 然后再对子组件最外层元素的class设置flex的样式属性会发现不会有效果。 比如在这个截图中 父元素 .parent-box 是 display:flex 然后对子元素 .child-box 设置 flex、justify-conten...
微信小程序中子父组件相互传值
1
05-10 1300
1.在子组件中通过triggerEvent方法触发一个自定义事件，并将数据作为参数传递给父组件,这里在点击按钮后触发了一个名为myevent的自定义事件，并将data作为参数传递给了父组件。
微信小程序父子组件之间传值
egg_er的博客
06-23 8808
组件之间传值有两种，一种是，另外一种是区别：首先我们在我们的小程序中创建一个 文件夹 用来存放我们的子组件。创建以后我们就可以在 文件夹下创建我们的子组件 , 当然创建成任何名字都可以，我在这里创建成 ，如下图： 创建好以后就是引入了，把这个 引入到我们的 首页中去。 这里说明一下，我在这里就创建了，一个是 节点下的 路由页面，以及 节点下的 组件。（原则在父组件的 json 文件中的 usingComponents节点下 引入）如下： 引入以后怎么把的内容上呢？… ：也很简单

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃葡萄不吐葡萄皮嘻嘻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值