介绍

• $emit 是 Vue 组件实例中的一个方法，用来触发自定义事件，并向父组件传递信息
• 它接受两个参数：事件名称和可选参数

  this.$emit('事件名称', 参数);
  

流程

示例

效果

• 触发前
  
• 触发后
  

父组件

• 父组件使用子组件 Son
• 父组件给子组件绑定了 emit 事件 setTextEvent
• setTextEvent 触发后，父组件会调用 setText 进行处理

<template><h3>父组件</h3><p>{{ text }}</p><Son @setTextEvent="setText"></Son>
</template><script>
import Son from "./Son.vue";export default {name: "Father",components: {Son},data() {return {text: ''}},methods: {setText(text) {this.text = text;}}
}
</script>

子组件

• 放置了一个按钮，点击触发 setText，这里的 setText 和父组件的 methods 中的 setText 没有任何关系，只是名字一样
• setText 中触发 setTextEvent emit 事件，并传递参数 hello

<template><button @click="setText">子组件触发 emit</button>
</template>
<script>export default {name: "Son",methods: {setText() {// 父组件绑定的 emit 事件是 setTextEventthis.$emit('setTextEvent', 'hello')}}
}
</script>