vue3深入组件：组件事件

触发与监听事件

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

<button @click="$emit('someEvent')">click me</button>

父组件可以通过 v-on (缩写为 @) 来监听事件：

<MyComponent @some-event="callback" />

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

事件参数

<button @click="$emit('increaseBy', 1)">
  传参1个值
</button>
<button @click="$emit('changeNameStr', 'zhejiang','hangzhou')">
传参多个值
</button>
<button @click="$emit('changeNameObj', {name:'zhejiang',address:'滨江区长河街道'})">
传参多个值
</button>

父组件监听事件并接收参数

const increaseCount = (data) =>｛
	console.log(data);  //  1
｝
const changeNameStr= (data1,data2) =>｛
	console.log(data1);  //  zhejiang
	console.log(data2);  //  hangzhou
｝
const changeNameObj= (data) =>｛
	console.log(data);  //  {name:'zhejiang',address:'滨江区浦沿街道'}
｝
<MyButton @increase-by="increaseCount"  @changeNameStr="changeNameStr" @changeNameObj="changeNameObj"/>

Tips: 所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

声明触发的事件

选项式API中,组件可以显式地通过 emits 选项来声明它要触发的事件
$emit() 方法在组件实例上也同样以 this.$emit() 的形式可用,

export default {
	emits: 'someEvent',
	  methods: {
		submit() {
	      this.$emit('someEvent')
	    }
   }
}

组合式api中，组件可以显式地通过 defineEmits() 宏来声明它要触发的事件：
我们在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>