一、简介
$emit 用于 子组件向父组件发送信号（参数）
通过子组件中的事件，向父组件中传参
二、用法
1、子组件 设置传参的事件和传递的参数
<template>
<div id="emit">
我是 Emit
<!-- 一、编辑传参事件 -->
<button @click="getFatherFn">点击我给父亲传参</button>
</div>
</template>
<script>
export default {
name: "Emit",
data() {
return {
// 二、编辑传的参数
message:"biubiubiubiubiubiu"
};
},
methods: {
getFatherFn:function(){
console.log("我是儿子，我在给粑粑传参")
/*
三、传递方法：
this.$emit
参数：发射的事件名、传的参数
*/
this.$emit("setSonFn",this.message)
}
},
};
</script>
<style>
</style>
2、父组件接收参数
<template>
<div id="emitFather">
我是 emitFather
<!-- 一、Emit 接受参数
属性：this.$emit 发射的事件名
-->
<Emit @setSonFn="myFn"></Emit>
</div>
</template>
<script>
import Emit from "@/components/emit/Emit"
export default {
name: "EmitFather",
data() {
return {};
},
components:{
Emit,
},
methods: {
// 二、获取参数
myFn:function(data){
console.log("我是老子，接收数据中")
console.log(data)
}
},
};
</script>
<style></style>
