微信小程序16: 组件通信

父子组件之间的通信

父子组件通信一共有三种方式

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

属性绑定

:::info

父组件向子传值

:::

属性绑定用于实现父向子传值,而且智能传递普通的类型的数据,无法将方法进行传递。

html 复制代码
//父组件定义data数据节点
data:{
  count:0
}

//父组件的wxml结构
<!-- 父组件向子组件传递count值 -->
<mytest1 count="{{count}}"></mytest1>
<view></view>
<view>父组件的count值为{{count}}</view>

在子组件内部需要声明对应的属性并使用

html 复制代码
// 子组件的properties节点
properties:{
  count: Number
}

// 子组件的wxml结构
<text>子组件中,countr值为{{count}}</text>

事件绑定

:::info

事件绑定用于实现子向父传值,可以传递任何类型的数据

:::

  1. 在父组件中的js,定义一个函数,这个函数通过自定义事件的形式,传递给子组件
javascript 复制代码
//在父组件中定义 syncount方法
// 将来,这个会被传递给子组件,供子组件调用
syncCount(){
  console.log("syncount");
},
  1. 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件,定义自定义事件sync
html 复制代码
<mytest1 count="{{count}}" bind:sync="syncCount">
  <view slot="slot1">我是插槽1的内容 </view>
  <view slot="slot2">我是插槽2的内容 </view>
</mytest1>
  1. 在子组件的js中,通过调用this.triggerEvent("自定义事件名称",{/参数对象/}),将数据发送到父组件,我想实现在子组件中增加树脂,然后把增加的值在复组件中显示,类似一两个页面中的数据绑定
javascript 复制代码
/**
   * 组件的方法列表
   */
methods: {
  addnumber(){
    this.setData({
      count:this.properties.count+=1
    })
    // 触发自定义事件实现把传过来的值将数同步个父组件
    this.triggerEvent('sync',{value:this.properties.count})
  }
}
  1. 在父组件的js中,通过e.detail获取到子组件传递过来的数据
javascript 复制代码
 //在父组件中定义 syncount方法
  // 将来,这个会被传递给子组件,供子组件调用
  syncCount(e){
    console.log("syncount");
    console.log(e.detail.value);
    this.setData({
      count:e.detail.value
    })
  },

获取组件实例方式进行父子组件通信

可以在父组件里调用this.selectComponent("id或class选择器"),获取子组件的对象,从而直接访问子组件的任意方法。调用时需要传递一个选择器,例如this.selectComponent(".my-component").

html 复制代码
//wxml结构
<view>
  我是父组件中的值:{{count}}
  <mytest1 count="{{count}}" bind:sync="syncCount"
    class="childName1"
    id="childName1">
    <view slot="slot1">我是插槽1的内容 </view>
    <view slot="slot2">我是插槽2的内容 </view>
  </mytest1>
</view>
<button bind:tap="getChild">获取子组件的实例对象</button>
javascript 复制代码
//定义事件处理函数
getChild(){
  const child = this.selectComponent('.childName1')
  console.log(child);
},

这时候点击按钮可以看到获取到了子组件的很多信息

我们可以设定点击按钮给子组件count传值让它自增加2

javascript 复制代码
getChild(){
  const child = this.selectComponent('.childName1')
  console.log(child);
  child.setData({
    count: child.properties.count+2
  })
},

不仅如此,我们还可以调用子组件中已经定义的方法,在打印出的内容中可以看到

在原型中有我们之前定义的addnumber方法,我们可以尝试调用,可以成功调用

javascript 复制代码
  getChild(){
    const child = this.selectComponent('.childName1')
    console.log(child);
    child.addnumber()
  },
相关推荐
老华带你飞9 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞15 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗16 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张1 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师1 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪1 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2091 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa1 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_916007471 天前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa1 天前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店