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

演示网站：gofly.v1kf.com
我的微信：llike620

处理客服助手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 = &#39;hello&#39;;
      this.$emit(&#39;send-data&#39;, data);
    }
  }
}
</script>


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

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