『uni-app』事件传值『this.$emit』『uni.$emit』

1.this.$emit

格式：this.$emit('事件',参数)

用于当子组件需要调用父组件的方法的场景下使用。

与之相对的当父组件需要调用子组件时则使用this.$refs的方法

示例

my-search.vue组件

<template>
  <view class="my-search-container" :style="{ 'background-color': bgcolor }" @click="searchBoxHandler">
    <view class="my-search-box" :style="{ 'border-radius': radius + 'px' }">
      <!-- 使用 uni-ui 提供的图标组件 -->
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      // 背景颜色
      bgcolor: {
        type: String,
        default: '#C00000'
      },
      // 圆角尺寸
      radius: {
        type: Number,
        default: 18 // px
      }
    },
    data() {
      return {

      }
    },
    methods: {
      searchBoxHandler() {
        /// 调用子组件的名为click的方法
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss">

</style>

home.vue

<template>
  <view>
    <!-- 搜索组件 -->
    <view class="search-box">
      <my-search @click="gotoSearch"></my-search>
    </view>

  </view>
</template>

<script>
  
  export default {
    data() {

    },
    onLoad() {

    },
    methods: {
      gotoSearch() {
        // 跳转到另一个页面
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">

</style>

2.uni.$emit(eventName,OBJECT)

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

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

只要在想要传值的页面onload方法中注册订阅事件,在需要传值的页面传值就可以收到回调

onload(){
      //全局事件订阅，只要订阅了事件就可以收到值
    uni.$on("globleEvent",(rel)=>{
        console.log(rel)
    })
}

触发全局订阅事件的方法

//全局事件订阅只要注册的页面都可以收到回调值
uni.$emit("globleEvent","我是全局事件订阅的传值")