27.组件事件

组件事件

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

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

<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>

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

实时效果反馈

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

A props

B data

C $emit

D event

答案

1=>C

A props

B data

C $emit

D event

答案

1=>C