小程序 step8-组件间通信

组件之间的通信方式有3 中

• wxml 数据绑定

• 事件监听、事件触发

  1. 自定义组件注册的时候，要写斜杠开头的路径： /components/com/com
  2. 页面在注册的时候，不需要写斜杠: pages/demoIndex/index
  3. 父子组件通信实例
     父组件中：

     <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 也可以作为组件之间的沟通桥梁，但是这种方式当代码组件过多时，会导致状态的修改来源无法追踪，而加大开发者的精神负担