vue3中emit的使用

既然是使用组合式api, 那必须得重点讲讲.setup

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

1.  执行时机 setup 函数会在 beforeCreate 之后、created 之前执行!!!
2. 接收 props 数据 在 props 中定义当前组件允许外界传递过来的参数名称： props: { p1: String } 通过 setup 函数的第一个形参，接收 props 数据： setup(props) { console.log(props.p1) }
3. context setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

 const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

理论说完了，下面我们来实战

child.vue

<template>
       <div>
           <p>hello world</p>
           <button @click = "go" class="btn btn-success">go</button>
       </div>
</template>
 
 
<script lang="ts">
import Vue from 'vue'
import {defineComponent} from "vue"
export default defineComponent({
   emits:['haha'],
   setup(prop,context){
       const methods = {
           go(){
               context.emit("haha")
           }
       }
       return {
           ...methods
       }
   } 
})
</script>