页面通讯

qin.$emit(eventName, OBJECT)

触发全局的自定义事件，附加参数都会传给监听器回调函数。

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

代码示例

  qin.$emit('update',{msg:'页面更新'})

  qin.$emit('update',{msg:'页面更新'})

qin.$on(eventName,callback)

监听全局的自定义事件，事件由 qin.$emit 触发，回调函数会接收事件触发函数的传入参数。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

代码示例

  qin.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  })

  qin.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  })

qin.$once(eventName,callback)

监听全局的自定义事件，事件由 qin.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

代码示例

  qin.$once('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  })

  qin.$once('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
  })

qin.$off([eventName, callback])

移除全局自定义事件监听器。

属性	类型	描述
eventName	Array＜String＞	事件名
callback	Function	事件的回调函数

Tips

• 如果qin.$off没有传入参数，则移除App级别的所有事件监听器；
• 如果只提供了事件名（eventName），则移除该事件名对应的所有监听器；
• 如果同时提供了事件与回调，则只移除这个事件回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

代码示例

$emit、$on、$off常用于跨页面、跨组件通讯，这里为了方便演示放在同一个页面

  <template>
    <view class="content">
      <view class="data">
        <text>{{val}}</text>
      </view>
      <button type="primary" @click="comunicationOff">结束监听</button>
    </view>
  </template>
  
  <script>
    export default {
      data() {
        return {
          val: 0
        }
      },
      onLoad() {
        setInterval(()=>{
          qin.$emit('add', {
            data: 2
          })
        },1000)
        qin.$on('add', this.add)
      },
      methods: {
        comunicationOff() {
          qin.$off('add', this.add)
        },
        add(e) {
          this.val += e.data
        }
      }
    }
  </script>
  
  <style>
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .data {
      text-align: center;
      line-height: 40px;
      margin-top: 40px;
    }
  
    button {
      width: 200px;
      margin: 20px 0;
    }
  </style>

  <template>
    <view class="content">
      <view class="data">
        <text>{{val}}</text>
      </view>
      <button type="primary" @click="comunicationOff">结束监听</button>
    </view>
  </template>
  
  <script>
    export default {
      data() {
        return {
          val: 0
        }
      },
      onLoad() {
        setInterval(()=>{
          qin.$emit('add', {
            data: 2
          })
        },1000)
        qin.$on('add', this.add)
      },
      methods: {
        comunicationOff() {
          qin.$off('add', this.add)
        },
        add(e) {
          this.val += e.data
        }
      }
    }
  </script>
  
  <style>
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  
    .data {
      text-align: center;
      line-height: 40px;
      margin-top: 40px;
    }
  
    button {
      width: 200px;
      margin: 20px 0;
    }
  </style>

注意事项

• qin.$emit、 qin.$on 、 qin.$once 、qin.$off 触发的事件都是 App 全局级别的，跨任意组件，页面， vue 等
• 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 qin.$on 注册监听，onUnload 里边 qin.$off 移除，或者一次性的事件，直接使用 qin.$once 监听
• 注意 qin.$on 定义完成后才能接收到 qin.$emit 传递的数据