vue3 emit组件事件

再页面上嗲用自定义组件时，我们可以通过props给自定义组件传值，可以通过插槽slots给自定义组件传递模板内容，以上说的都是父向子的传递，那自定义组件能够通过emit组件事件给父组件传递值。

emit语法

@监听事件="$emit(自定义事件名称，传递的值)"

触发与监听

我们可以在子组件中用click点击事件或者change改变事件，来声明一个$emit方法的进行自定义方法的触发

触发

写法1

<button @click="$emit('number',1)">按钮</button>

 注意：这样的写法不能用引号，要用单引号，因为@click=""就用了引号了，里面就不能再用引号了

 写法2

<template>
	<view>
		<button @click="onClick">按钮</button>
	</view>
</template>

<script setup>
	const emit=defineEmits(["number"]);
	function onClick(){
		emit("number",123);
	}
</script>

监听 

在父组件中我们可以用v-on来监听子组件的emit的自定义方法的触发

<template>
	<view class="">
		<test-emit @number="onHave"></test-emit>
	</view>
</template>

<script setup>
	const onHave = function(e) {
		console.log(e);
	}
</script>

注意：@后面是我们要监听的子组件emit自定义方法名字，引号里面的是我们用于得到子组件传个我们值的方法

页面显示效果

 emit定义多个自定义方法

通过一个案例来展示

自定义组件代码

<template>
	<view>
		<button @click="onClik">点击按钮改变容器盒子颜色</button>
		<input class="inputStyle" type="text" placeholder="请输入显示的字体大小,单位:px"  @input="onInput"/>
	</view>
</template>

<script setup>
	const emit=defineEmits(['randomColor','fontSize']);
	function onClik(){
		emit('randomColor',Math.random());
		//传一个随机数给父组件
	}
	function onInput(e){
		emit("fontSize",e.detail.value);
		//把input框里面的值传给父组件
	}
</script>
<style lang="scss" scoped>
.inputStyle{
	height: 40px;
	border: 1px solid #ccc;
	margin: 10px 5px;
	padding: 0px 5px;
}
</style>

父组件所在的vue文件代码

<template>
	<view class="">
		<test-emit @randomColor="onHaveRandomColor" @fontSize="onChange"></test-emit>
        <!--绑定多个emit触发的自定义方法-->
		<view class="box" :style="{background:color,fontSize:size+'px'}">监听emit组件事件</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const color=ref("#cccacb");
	const size=ref(16);
	const onHaveRandomColor = function(e) {
		color.value="#"+String(e).substring(3,6);
//截取3位从子组件传过来的随机数，用于随机显示view容器盒子的颜色
	}
	const onChange=function(e){
		if(e==""){
			//如果input如果没有输入值，子组件传过来的是空字符串，就给文字设定一个默认值
			size.value=16;
		}else{
		size.value=e;
		//把子组件传过来的值赋给size响应式变量
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 200px;
	color: white;
}
</style>

页面展示效果

emit组件事件示例