下面是详细讲解Vue3.x中emits的基本用法实例的攻略，包含两个示例说明。

Vue3.x中emits的基本用法实例

什么是emits？

emits是Vue3新引入的一个选项，它用于为自定义组件声明触发的自定义事件。在Vue3中，$emit方法被移到了组件实例的emits属性中，因此emits属性的主要作用就是声明自定义事件，为自定义组件提供了非常好的解耦和复用性。

如何使用emits？

在组件定义中，我们可以在options中声明emits属性:

import { defineComponent } from 'vue'

export default defineComponent({
  emits: ['custom-event'],
  // ...
})

在上面代码中，我们声明了自定义事件名'custom-event'。

当然，我们也可以使用对象来声明多个事件：

import { defineComponent } from 'vue'

export default defineComponent({
  emits: {
    'custom-event': (arg1, arg2) => {
      if (arg1 === 'foo') {
        return true
      } else {
        return new Error('arg1不是foo')
      }
    },
    'another-custom-event': null
  },
  // ...
})

在上面代码中，我们声明了两个自定义事件名：'custom-event'和'another-custom-event'。

示例1：Custom Button

接下来，我们来看一个例子。假设我们需要一个CustomButton组件，它有两个按钮，分别是确认和取消，我们可以为组件声明两个自定义事件名：'confirm'和'cancel'，当用户点击这两个按钮时，分别触发这两个自定义事件。

首先，我们需要在组件中声明emits属性，来声明自定义事件名：

import { defineComponent } from 'vue'

export default defineComponent({
  emits: ['confirm', 'cancel'],
  // ...
})

接下来，我们需要在template中使用这两个按钮：

<template>
  <div>
    <button @click="$emit('confirm')">确认</button>
    <button @click="$emit('cancel')">取消</button>
  </div>
</template>

在上面代码中，我们使用了$emit方法，来分别触发两个自定义事件。

最后，我们可以在父组件中使用这个CustomButton组件，并监听相应的自定义事件：

<template>
  <custom-button @confirm="onConfirm" @cancel="onCancel"/>
</template>

<script>
import CustomButton from '@/components/CustomButton.vue';

export default {
  components: {
    CustomButton,
  },
  methods: {
    onConfirm() {
      console.log('确认');
    },
    onCancel() {
      console.log('取消');
    },
  },
};
</script>

在上面代码中，我们监听了confirm和cancel两个自定义事件，并在相应的回调函数中输出了相应的信息。

示例2：Custom Input

接下来，我们再介绍一个CustomInput组件的例子。假设我们需要一个CustomInput组件，它可以接受用户输入，并将输入的值保存在组件内部的状态中，同时还声明了change事件，当用户输入内容发生变化时，会触发此自定义事件。

首先，我们需要在组件中声明emits属性，来声明自定义事件名：

import { defineComponent } from 'vue'

export default defineComponent({
  emits: ['change'],
  // ...
})

接着，在template中使用v-model，并在输入框的input事件中触发change事件：

<template>
  <div>
    <input type="text" v-model="value" @input="$emit('change', value)">
  </div>
</template>

在上面代码中，我们使用了v-model来绑定组件内部状态中的value变量，同时在输入框的input事件中触发了change自定义事件，参数为当前的输入框值value。

最后，我们可以在父组件中使用这个CustomInput组件，并监听相应的自定义事件：

<template>
  <custom-input @change="onChange" />
</template>

<script>
import CustomInput from '@/components/CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
  methods: {
    onChange(value) {
      console.log('输入框的值变更为：'+value);
    },
  },
};
</script>

在上面代码中，我们监听了change自定义事件，并在回调函数中输出了相应的信息。

这就是Vue3.x中emits的基本用法实例。