小程序自定义组件实现以及组件之间通信

概述

  • 小程序自定义组件实现
  • .自定义组件与父组件之间通信以及事件绑定

 

 

自定义组件实现具体内容

子组件文件

小程序自定义组件实现以及组件之间通信_第1张图片

父组件文件

小程序自定义组件实现以及组件之间通信_第2张图片

1.首先配置父组件的.json文件,也就是上面的assess.json文件,引入子组件,配置如下:

"from-html"是组件引用名称,右边的"/component/inform/inform"是组件文件地址

 2.配置父组件的.wxml文件,配置如下:

标签名就是上面配置的组件名称,

location={ {location}} 是数据绑定,

bind:placetextCityUpdate="placetextCityUpdate" 是事件绑定

小程序自定义组件实现以及组件之间通信_第3张图片

 3.子组件里定义接收绑定数据

小程序自定义组件实现以及组件之间通信_第4张图片

 4.子组件里调用父组件事件

placetextCityUpdate是上面绑定的事件名称,{}里是数据传递

this.triggerEvent("placetextCityUpdate", {});

5.父组件里定义方法给子组件调用

小程序自定义组件实现以及组件之间通信_第5张图片

 官方说明:出于性能考虑,使用 usingComponents 时, setData 内容不会被直接深复制,即 this.setData({ field: obj }) 后 this.data.field === obj 。(深复制会在这个值被组件间传递时发生。)

你可能感兴趣的:(微信小程序,自定义组件,小程序)