VUE中使用this.$emit()的使用进行父子组件之间传值

vue中使用this.$emit()的使用：

子组件child.vue

<template>
    <button @click=buttonClick>点击事件</button>
</template>

export default {
    name: 'ChildComponent',
    methods: {
        buttonClick() {
         // 触发点击事件，并传递数据给父组件
           this.$emit('parent-event','xiaoming')
        }

    }
}

当点击时，进入到buttonClick()方法，此时调用this.$emit()方法触发自定义事件parent-event

并传递了'xiaoming'作为数据

父组件parent.vue通过监听parent-event来接收这个自定义事件并执行

<template>
    <child @parent-event="handleParentEvent"></child>
</template>

// 在父组件中引入子组件
import childComponent  from '@/component/childComponent'

export default {
    name: 'Parent',
    data(){
        return {
        }
    },
// 注册子组件
   components: {
        childComponent
     },
   methods: {
        handleParentEvent(data) {
            // 处理自定义事件的逻辑
               console.log(data)// 输出'xiaoming'
        }
    }
}

参考文章：Vue中的this.$emit()方法详解_vue.js_脚本之家 (jb51.net)