【微信小程序】 您所在的位置:网站首页 微信小程序组件通信 【微信小程序】

【微信小程序】

2023-10-10 17:36| 来源: 网络整理| 查看: 265

请添加图片描述

💌 所属专栏:【微信小程序开发教程】

😀 作  者:我是夜阑的狗🐶

🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘

文章目录 前言一、父子组件之间的通信1、父子组件之间通信的 3 种方式2、属性绑定3、事件绑定4、获取组件实例 总结

前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第38篇文章;   今天开始学习微信小程序的第21天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。   专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。   如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

一、父子组件之间的通信

  前面已经介绍了自定义组件 - 组件所在页面的生命周期 & 插槽,通过栗子学习了组件页面生命周期在实际中应用,以及插槽使用方式。接下来就来讲解一下另外一个自定义组件 - 父子组件之间的通信。话不多说,让我们原文再续,书接上回吧。

请添加图片描述

1、父子组件之间通信的 3 种方式

  在小程序中,组件之间的通信方式如下所示:

通信方式说明属性绑定用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据事件绑定用于子组件向父组件传递数据,可以传递任意数据获取组件实例父组件还可以通过 this.selectComponent() 获取子组件实例对象。这样就可以直接访问子组件的任意数据和方法 2、属性绑定

  属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。这里将 message 页面当成父组件,父组件的具体代码如下:

app.json

  新建自定义组件 test5 并设置全局引用。

{ "usingComponents":{ "my-test1": "/components/test1/test1", "my-test2": "/components/test2/test2", "my-test3": "/components/test3/test3", "my-test4": "/components/test4/test4", "my-test5": "/components/test5/test5" }, }

message.js

  父组件的 data 节点。

Page({ /** * 页面的初始数据 */ data: { count: 0 }, })

message.wxml

  父组件 wxml 结构。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有