微信小程序组件方法互相调用

子组件

wxml

<button size="default" bindtap="handleSonClick" bindtap="handSonClick">子组件</button>

// components/children/nav.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {//子组件调用父组件 且传参handSonClick(e) {let obj = {name: "我是子组件的参数",age: 19}//子组件调用父组件 且传参this.triggerEvent('parentComponentFunction', obj);},//被父调用函数 且传参foo(e) {console.log('父组件调用了子组件的方法', e);}}
})

父组件

demo3.wxml

<!--pages/demo03/demo03.wxml-->
<view>
<!-- 子组件代码开始 -->
<myChildren
bind:parentComponentFunction="parentComponentFunction"
id="mychildrenId"
>
</myChildren><!-- 子组件代码结束 --><view class="btview"><button size="default" bindtap="handParentClick">父组件</button></view>
</view>

demo3.js

// pages/demo03/demo03.js
Page({/*** 页面的初始数据*/data: {childrenId:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.data.childrenId=this.selectComponent("#mychildrenId")   //获取子组件id名称},//子组件调用方法parentComponentFunction(e){console.log('子组件调用了父组件的方法',e.detail)},//调用子组件方法handParentClick(e){let obj={name:"我是父组件的参数",age:19}this.data.childrenId.foo(obj);},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

demo3.json引入子组件

{"usingComponents": {"myChildren":"../../components/children/nav"}
}

微信小程序组件方法互相调用相关推荐

微信小程序组件与页面的传参、方法调用（二）
微信小程序组件与页面的传参.方法调用使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
使用TypeScript开发微信小程序的方法
TypeScript是C#之父Anders Hejlsberg的又一力作,很多喜欢c#语法的朋友对typescript都爱不释手,今天小编给大家介绍下TypeScript开发微信小程序的方法,感兴趣的 ...
微信小程序组件与页面互相传值
微信小程序组件与页面互相传值 1.外界对组件内部传值(父传子) 组件properties属性的应用 ① 定义组件内部要接受外部的值 ② 定义页面要传输给组件内部的值 ③ 传输数据 ④ 组件内部对pro ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作注:子组件向父组件中传递通过事件传递操作通过事件参数对象det ...
uniapp 微信小程序登录方法封装
uniapp 微信小程序登录方法封装前言一.登录接口二.登录上代码总结前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法一.登录接口 uni.getUserProfile ...
微信小程序setdata方法
微信小程序setdata方法微信小程序中有时候需要从其他位置获取数据在前端调用一般会用到小程序中封装好的setdata方法: /** `setData` 函数用于将数据从逻辑层发送到视图层*(异步 ...
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...

微信小程序组件方法互相调用

微信小程序组件方法互相调用相关推荐

最新文章

热门文章