Vue3中defineEmits、defineProps 不用引入便直接用

在Vue 3中，通过使用defineEmits 和 defineProps，可以轻松地定义和传递props和events，而不必再引入混入对象或组件上下文中的访问器方法。

首先，让我们看看如何使用defineProps定义组件的props。在Vue 3中，我们可以像这样使用defineProps来定义组件的props：

<template>
  <div>
    <h3>{{title}}</h3>
    <p>{{content}}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: defineProps({
    title: String,
    content: String
  })
}
</script>

这样我们就可以直接在组件内部通过title和content直接访问它们，而无需重新定义名为props的对象，这大大简化了组件的开发流程。

接下来，我们来看看如何使用defineEmits去定义组件的事件。如果您在Vue 2中使用过自定义事件，您可能已经熟悉使用 this.$emit() 方法来触发事件。在Vue 3中，我们可以使用defineEmits方法，可以在不引入混入对象或组件上下文中的访问器方法的情况下定义和触发组件的事件。

<template>
  <button @click="emitClicked(true)">Click me</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: defineEmits(['clicked']),
  methods: {
    emitClicked(value) {
      this.$emit('clicked', value);
    }
  }
}
</script>

这里的defineEmits 将被用来定义clicked事件，所以我们可以在props中定义它。这样我们就可以在组件中直接使用 $emit() 来触发clicked事件，而无需重新定义名为emits的对象。

在这个示例中，我们定义了组件的clicked事件，当按钮被点击时被触发。此时，我们使用 this.$emit() 触发事件，参数为 true，并在父组件中捕获事件进行处理。

总之，Vue 3中的defineProps和defineEmits使得我们的组件开发流程更加简单和流畅，使我们能够更快地构建出强大的Vue应用程序。