微信小程序----父子组件之间通信

这篇具有很好参考价值的文章主要介绍了微信小程序----父子组件之间通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、属性绑定

用于父组件向子组件的指定属性设置数据,仅能设JSON兼容的数据

创建组件

微信小程序----父子组件之间通信

 将组件全局共享

微信小程序----父子组件之间通信

 对应的父页面进行调用

微信小程序----父子组件之间通信

 在子组件的js中定义参数

微信小程序----父子组件之间通信

 子组件展示数据

微信小程序----父子组件之间通信

 最终效果

微信小程序----父子组件之间通信

2、事件绑定

用于子组件向父组件传递数据,可以传递任意数据

步骤:

1、在父组件的js中定义一个函数,这个函数通过自定义时间的形式,传递给子组件

2、在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递个子组件

微信小程序----父子组件之间通信

bind:parent  其中parent是自定义的参数,作为子组件的方法名称使用

3、在子组件的js中,通过调用this.triggerEvent('自定义事件名称‘’,{/*参数对象*/}),将数据发送到父组件

微信小程序----父子组件之间通信

 parent参数是2中定义的参数

4、在父组件的js中,通过e.detail获取到子组件传递过来的数据

微信小程序----父子组件之间通信

接收到子组件传递回来的参数 

3、获取组件实例

父组件可以通过this.selectComponent(“id或class选择器”)获取子组件实例对象

这样可以直接访问子组件的任意数据和方法

微信小程序----父子组件之间通信

创建子组件样式或id属性,绑定事件 

微信小程序----父子组件之间通信

 在父级的js中定义函数,并获取到子组件的对象、参数及内部的方法

behaviors共享使用 

创建behaviors

调用Behavior(Object object)方法,即可创建一个共享的behavior实例对象,供所有的组件使用

微信小程序----父子组件之间通信

 创建behavior文件夹,创建自定义名称的js

2、导入并使用behavior

在组件中,使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据和方法

微信小程序----父子组件之间通信

在需要引用的js中导入behavior,并挂载 

微信小程序----父子组件之间通信

渲染测试

微信小程序----父子组件之间通信文章来源地址https://www.toymoban.com/news/detail-457690.html

到了这里,关于微信小程序----父子组件之间通信的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序(四)--- 自定义组件详解(properties,数据监听器,纯数据字段,插槽,父子间通信,behaviors)

    目录 一、创建组件 二、引用组件 1、局部引用 2、全局引用 三、组件和页面的区别 四、组件样式隔离 1、注意点 2、修改组件的样式隔离选项  五、数据、方法、属性 1、data数据 2、methods方法 3、properties属性  4、data和properties的区别  5、使用setData修改properties的值  六、数据

    2024年01月24日
    浏览(53)
  • react 组件之间的通信(父子组件)

    React中 组件内调用其他组件不需要进行 类似于vue 声明组件(components) React 组件内调用其他组件 直接将组件导入 放置在对应的JSX 代码中 父子组件通信(传统): 1、父组件-子组件  通过属性传递 2、子组件-父组件  父组件通过将自身的函数对象传递给子组件, 子组件执行父组件

    2024年02月08日
    浏览(67)
  • vue父子组件之间双向数据绑定的(vue2/vue3)

    vue父子组件之间双向数据绑定的四种方法(vue2/vue3) vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组

    2024年02月08日
    浏览(76)
  • 微信小程序:父子组件传值

    在微信小程序里,父组件可以向子组件传值,子组件也可以向父组件传值,不过这两种传值方式不大相同,下面先简单介绍这两种传值的区别。 两者的区别 父组件向子组件传值,使用的是   属性绑定   的方法,并且只能传递普通类型的数据 子组件向父组件传值,使用的是

    2024年02月07日
    浏览(62)
  • VUE 父子组件、兄弟组件 之间通信 最强详解

    目录 1. 父组件 调用 子组件 内参数/方法 1.1 通过 ref 调用/获取 子组件内参数/方法 2. 子组件 调用 父组件 内参数/方法 2.1 通过 emit 调用 父组件方法 2.2 通过 props 调用 父组件方法/参数 2.3 通过 this.$parent 调用 父组件方法/参数 3. 兄弟组件 通信 3.1 通过 bus 进行 兄弟组件 通信

    2024年02月05日
    浏览(61)
  • Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

    目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 本文将介绍在Vue中父子组件如何进行通信 这里先介

    2024年02月05日
    浏览(117)
  • 微信小程序——常用组件的属性介绍

    text 文本组件 类似于HTML中的span标签,是一个行内元素 rich-text 富文本标签 支持把HTML字符串渲染为WXML结构 text标签的基本使用 通过text组件的selectable属性,实现长按选中文本内容的效果。只有text标签支持长按选中效果,其他的组件是不支持的 结构内容代码: view class=\\\"text-

    2024年02月07日
    浏览(75)
  • 微信小程序实现数值监听(页面和组件属性)

    简介 目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据,请跳转至另一个文章介绍 为什么需要监听属性值 当需要通过一个属性变化时候,需要计算相应的方法等。pc网站经常需要监听属性,那么小程序应该怎么去实现? 1、首先创建公共的

    2024年02月09日
    浏览(61)
  • 微信小程序的页面制作---常用组件及其属性2

    在全局配置文件app.json中添加taBar配置,可实现标签栏配置。标签栏最少2个,最多5个 (1)如何配置标签栏? 1》先建多个文件,(以我的index,list,myform文件夹为例) 2》在app.json这个全局配置文件里面配置taBar,(必填taBar配置项——color、selectedColor、backgroundColor、list) 3》

    2024年04月13日
    浏览(44)
  • 【微信小程序】要在两个<view>之间绘制一条分割线,使用border属性和样式

    要在两个 view 之间绘制一条分割线,可以使用 border 属性以及适当的样式设置。以下是一个示例代码: 在上述代码中,使用了一个 view 标签作为容器,内部包含两个内容 view 和一个分割线 view 。 .container 类设置了 display: flex; 属性,使内容和分割线水平排列。 .content 类设置了

    2024年02月07日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包