组件之间的通信方式有3 中
-
wxml 数据绑定
-
事件监听、事件触发
- 自定义组件注册的时候,要写斜杠开头的路径:
/components/com/com
- 页面在注册的时候,不需要写斜杠:
pages/demoIndex/index
- 父子组件通信实例
父组件中:<view class="" hover-class="none" hover-stop-propagation="false"> 父组件中的值: {{value}} </view> <component-com bind:myevent="add" sum="{{value}}"/>
子组件中:Page({ data: { value: 20 }, add(e) { console.log(e) wx.showToast({ title: e.detail, }); this.setData({ value: this.data.value + 1 }) }, })
<button bind:tap="triggerClick">click++</button> <view class="" hover-class="none" hover-stop-propagation="false">{{sum}}</view>
// components/com.js Component({ /** * 组件的属性列表 */ properties: { sum: { type: Number, value: 0 } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { triggerClick() { this.triggerEvent('myevent', 'msg from children Component') } } })
- 自定义组件注册的时候,要写斜杠开头的路径:
-
父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。
console.log(this.selectComponent('.component'))
- 虽然借助全局的 getApp 也可以作为组件之间的沟通桥梁,但是这种方式当代码组件过多时,会导致状态的修改来源无法追踪,而加大开发者的精神负担