组件事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件

触发自定义事件的目的是组件之间传递数据

xxxxxxxxxx
<template>
    <h3>ComponentA</h3>
    <ComponentB @some-event="getHandle"/>
    <p>ComponentA接受的数据：{{ message }}</p>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
    data(){
        return{
            message:""
        }
    },
    components:{
        ComponentB
    },
    methods:{
        getHandle(data){
            this.message = data;
        }
    }
}
</script>

xxxxxxxxxx
<template>
    <h3>ComponentB</h3>
    <button @click="sendHandle">发送数据</button>
</template>
<script>
export default {
    methods: {
        sendHandle() {
            this.$emit("someEvent", "ComponentB的数据")
        }
    }
}
</script>

温馨提示

组件之间传递数据的方案：

1. 父传子：props
2. 子传父：自定义事件(this.$emit)

实时效果反馈

1. 下列那个是自定义事件组件传递数据的关键字：

A props

B data

C $emit

D event

答案

1=>C