微信小程序父子组件通信详细介绍

组件间的基本通信方式有以下几种:

  • WXML 数据绑定:用于父组件向子组件的指定属性设置数据。
  • 事件:用于子组件向父组件传递数据,可以传递任意数据。
  • 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent() 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。

父组件通过 properties 属性给子组件传递数据:

// 父组件 home.wxml
<search-input placeholderText="搜明星、达人"></search-input>
// 子组件 searchInput.wxml
<input placeholder="{{placeholderText}}"/>
// 子组件 searchInput.js
Component({
 	properties: {
	    placeholderText:{
	      type: String,
	      value: '请输入'
	    }
   }
})

子组件通过自定义事件给父组件传递数据:

自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。

// 子组件 searchInput.wxml
<input bindconfirm="handleSearch"/>
// 子组件 searchInput.js
Component({
 	methods: {
	    handleSearch(){
	      // 自定义组件触发事件时,需要使用 triggerEvent 方法指定事件名、detail 对象和事件选项。
	      this.triggerEvent('confirmSearch', {value: '我是输入的值'}, {});
	    }
   }
})
// 引用自定义组件的页面 home.wxml
// 可以在引用自定义组件的页面通过 bind 监听子组件触发的事件
<search-input bindconfirmSearch="handleSearch"></search-input>
// 父组件 home.js
Page({
	handleSearch(e){
		const value = e.detail.value;
	}
})

triggerEvent():

自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail 对象和触发事件的选项。

触发事件的选项包括:

  • bubbles:事件是否冒泡。
  • composed:事件是否可以穿越组件边界。属性值为 false 时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部。
  • capturePhase:事件是否拥有捕获阶段。
<-- custom-li.wxml -->
<view>
  <view bindtap="liEventListener">我是自定义的 li</view>
</view>
// custom-li.js
Component({
  relations: {
    '../custom-ul/custom-ul': {
      type: 'parent',
    }
  },
  methods: {
    liEventListener: function(){
      this.triggerEvent('click', {}) // 触发 liPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true }) // 依次触发 liPageEventListener、ulPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true, composed: true }) // 依次触发 liPageEventListener、// 依次触发 liPageEventListener、ulPageEventListener、ulPageEventListener
    }
  }
})
<!-- custom.wxml -->
<view bindclick="ulEventListener">
  <view class="header">我是自定义的 ul</view>
  <slot></slot>
</view>
<!-- index.wxml -->
<view>
	<custom-ul bindclick="ulPageEventListener">
  		<custom-li bindclick="liPageEventListener"></custom-li>
	</custom-ul>
</view>

父组件通过获取子组件实例来调用子组件的数据和方法:

可在父组件里调用 this.selectComponent() 来获取子组件的实例对象,调用时需要传入一个匹配选择器 selector。

// 父组件home.wxml
<search-input class="home-search"></search-input>
//父组件 home.js
Page({
  handleChangeTabs () {
    const searchImput = this.selectComponent('.home-search');
  }
})

默认情况下,小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例,将返回 null。如果想让一个组件在上述条件下依然能被 selectComponent 返回,可使用内置 behavior: wx://component-export 自定义其返回结果。使用该 behavior 时,自定义组件中的 export 定义段将用于指定组件被 selectComponent 调用时的返回值。

// 自定义组件 my-component 内部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})
<!-- 父组件使用自定义组件 -->
<my-component id="the-id" />
// 父组件调用
const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }

到此这篇关于微信小程序父子组件通信详细介绍的文章就介绍到这了,更多相关小程序组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序父子组件通信详细介绍

    组件间的基本通信方式有以下几种: WXML 数据绑定:用于父组件向子组件的指定属性设置数据. 事件:用于子组件向父组件传递数据,可以传递任意数据. 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent() 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法. 父组件通过 properties 属性给子组件传递数据: // 父组件 home.wxml <search-input placeholderText="搜明星.达人">

  • 微信 小程序开发环境搭建详细介绍

    微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

  • 微信小程序 触控事件详细介绍

    微信小程序 触控事件: 微信小程序的"事件"挺有意思.看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便. 接下来把文档copy过来 原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html >>>什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

  • 微信小程序 rpx 尺寸单位详细介绍

    微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应, 微信小程序尺寸单位rpx以及样式 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0. rpx单位是微信小程序中css

  • 微信小程序 用户数据解密详细介绍

    微信小程序 用户数据解密 官方指引图: 引导图一步一步操作 1.获取code onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 let that = this wx.login({ success: function (res) { // success let code = res.code that.setData({ code: code }) wx.getUserInfo({ success: function (res)

  • 微信小程序 保留小数(toFixed)详细介绍

     微信小程序 保留小数(toFixed) 今天遇到了不少问题,问题虽小,这里记录下 微信小程序 保留小数(toFixed)的知识: 1.保留小数点后几位小数. 方法很简单.toFixed()即可.括号内的数字表示保留的位数.如果是整数,就会不上0 特别注意:这方法返回的是String,我开始不知道,拿着返回值去做加法,折腾半个小时都是拼字符串,问了黄秀杰大神才知道搞错了.然后用parseInt()转换类型才拿到值. 2.获取几位数 toPrecision() 上图;第一组是获取四位数,第二组是获

  • 微信小程序 Nginx环境配置详细介绍

    微信小程序Server环境配置详解 主要内容: 1. SSL免费证书申请步骤 2. Nginx HTTPS 配置 3. TLS 1.2 升级过程 微信小程序要求使用 https 发送请求,那么Web服务器就要配置成支持 https,需要先申请SSL证书 小程序也要求 TLS(传输层安全协议)的版本至少为 1.2,在配置好 https之后,如果 TLS 的版本较低,就涉及到升级问题 所以 Server端环境配置的主要步骤: 申请 SSL 证书 配置web服务器支持https(我使用的是nginx)

  • 微信小程序 基础组件与导航组件详细介绍

    微信小程序 基础组件与导航组件详解: 1.基础组件 1.1 图标 icon 1.2 文本 text 1.3 进度条 progress 2.导航组件(navigator)  1.基础组件    1.1 图标 icon (1)总结 (2) 案例 效果截图 page.wxml <view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}&qu

  • 一步步教你实现微信小程序自定义组件

    目录 前言 组件的声明与使用 组件通信 方法一 WXML 数据绑定 方法二 事件 方法三 selectComponent 获取组件实例对象 方法四 url 参数通信 参数过长怎么办?路由 api 不支持携带参数呢? 方法五 EventChannel 事件派发通信 会出现数据无法监听的情况吗? 使用自定义的事件中心 EventBus 小结 附:组件和页面的区别 总结 前言 在微信小程序开发过程中,对于一些可能在多个页面都使用的页面模块,可以把它封装成一个组件,以提高开发效率.虽然说我们可以引入整个

随机推荐