1.app.vue文件
<template>
<div>
<h1>{{ msg }}</h1>
<Child @yyds="onHandle" />
</div>
</template>
<script setup >
import Child from './Child.vue'
import { ref } from 'vue';
let msg =ref('')
const onHandle=(data)=>{
msg.value=data.value
}
</script>
<!-- vue2 -->
<!-- <script>
import Child from './Child.vue'
export default {
components:{
Child,
},
data() {
return {
msg:''
}
},
methods: {
onHandle(data,num){
console.log('获取child 传递的值',data,num);
}
},
}
</script> -->
<style scoped>
</style>
2.Child.vue文件
<template>
<button @click="e=>handle()"></button>
</template>
<--vue3.x -->
<script setup>
import { ref,defineEmits } from 'vue';
let msg =ref('child 中内容')
/**
* defubeEmites() 作用定义自定义事件
* 参数:数组,数组元素是自定义事件名
* 返回:返回触发事件的函数
*/
let eimits =defineEmits(['yyds'])
/**
* emits() 作用触发自定义事件
* 参一:defineEmits中定义的事件名
* 参二:触发事件处理函数传入的实参
*/
const handle=()=>{
eimits('yyds',msg,12345)
}
</script>
<--vue2.x -->
<!-- <script>
export default {
setup () {
return {
msg:"child 中内容"
}
},
methods: {
handle(){
/**
* $emit()
* 作用:触发自定义事件
* 参一:事件名,
* 参二:事件处理函数传入的实参
*/
this.$emit('yyds',this.msg)
}
},
}
</script> -->
<style scoped>
</style>
# emit
- 1.在定义组件的时候:定义自定义事件名
- 2.使用组件时,v-on绑定自定义事件
- 3.在定义组件中使用 $emit() 触发自定义事件绑定的函数,并传入实参
## 用途
- 1.在封装组件时,将组件内部的数据提供给组件外部
- 2.给组件外部提供钩子函数(一些自定义事件)