$emit 在 Vuejs 组件开发中是使用频率较高一个 API，往往会使用 $emit 将子组件运行后的结果通知到父组件去执行后续的一些操作。在类组件中同样需要一个新的装饰器支持：@Emit。

基础示例

在下面这个 Form 组件中，我们仅让它来负责数据的收集，在触发登陆按钮后会通过事件派发将 username 和 password 数据发送至它的父组件。

<script lang="ts">
  import { Component, Emit, Vue } from 'vue-facing-decorator';

  @Component({
    name: 'Form',
  })
  export default class From extends Vue {
    username = 'admin';
    password = '123456';

    @Emit('login')
    login() {
      return {
        username: this.username,
        password: this.password,
      }
    }
  }
</script>

<template>
  <p>username: <input v-model="username"></p>
  <p>password: <input v-model="password"></p>
  <p><button @click="login">登陆</button></p>
</template>

<script lang="ts">
  import Form from './components/Form.vue';
  import { Component, Vue } from 'vue-facing-decorator';

  @Component({
    components: {
      Form,
    },
  })
  export default class App extends Vue {
    toLogin(value: any) {
      console.log(`以获取登陆数据，${value.username}/${value.password}，可以执行登录请求~`);
    }
  }
</script>

<template>
  <div>
    <Form @login="toLogin"></Form>
  </div>
</template>

[^注]: @Emit 的参数即事件派发的名称，如果装饰器所描述的方法名称和派发事件的名称一致，则可以省略装饰器内的参数。

异步事件

将上面的案例进行改造，Form 组件中的 login 方法负责请求服务器进行实际的登陆处理，将登陆的结果进行派发，在其父组件接收登录的结果。

<script lang="ts">
  import { Component, Emit, Vue } from 'vue-facing-decorator';

  @Component({
    name: 'Form',
  })
  export default class From extends Vue {
    username = 'admin';
    password = '123456';

    @Emit('login')
    login() {
      return new Promise((resolve) => {
        setTimeout(() => {
            resolve('登陆成功~')
        }, 1000)
      })
    }
  }
</script>

<template>
  <p>username: <input v-model="username"></p>
  <p>password: <input v-model="password"></p>
  <p><button @click="login">登陆</button></p>
</template>

<script lang="ts">
  import Form from './components/Form.vue';
  import { Component, Vue } from 'vue-facing-decorator';

  @Component({
    components: {
      Form,
    },
  })
  export default class App extends Vue {
    toLogin(value: any) {
      console.log(`登陆结果：${value}`);
    }
  }
</script>

<template>
  <div>
    <Form @login="toLogin"></Form>
  </div>
</template>