登录

在 Vue 和 uniapp 中 this.$emit 进行父子组件的通信,触发当前组件自定义事件的方法

处理客服助手uniapp代码时,h5录音功能,子组件通过 this.$emit传递错误信息给父组件


在 Vue 和 uniapp 中,this.$emit 是用于触发当前组件实例上的自定义事件的方法。

$emit 方法接受两个参数:


第一个参数是要触发的事件名称(字符串类型)。

第二个参数是传递给事件处理函数的参数(可以是任何类型的值,可以是一个对象、数组、字符串等等)。


使用 $emit 方法可以在当前组件中触发一个自定义事件,然后在父组件中通过 v-on 指令监听该事件,从而实现子组件向父组件传递数据的功能。

例如,假设在一个子组件中需要向父组件传递一个字符串数据,可以在子组件中使用 $emit 方法触发一个自定义事件,然后在父组件中通过 v-on 指令监听该事件,并在事件处理函数中获取子组件传递过来的数据。示例代码如下:

<!-- 子组件 -->
<template>
  <button @click="sendData">发送数据</button>
</template>
<script>
export default {
  methods: {
    sendData() {
      const data = 'hello';
      this.$emit('send-data', data);
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @send-data="handleSendData"></child-component>
    <p>{{ receivedData }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      receivedData: ''
    }
  },
  methods: {
    handleSendData(data) {
      this.receivedData = data;
    }
  }
}
</script>


在上面的代码中,子组件中定义了一个 sendData 方法,该方法使用 $emit 方法触发了一个名为 send-data 的自定义事件,并传递了一个字符串数据。在父组件中,通过 v-on 指令监听了该自定义事件,并在事件处理函数中获取了子组件传递过来的数据,并将其显示在页面上。