一羊壹、簡介
$emit 用于 子組件向父組件發(fā)送信號(參數(shù))
通過子組件中的事件,向父組件中傳參
二、用法
1款违、子組件 設(shè)置傳參的事件和傳遞的參數(shù)
<template>
<div id="emit">
我是 Emit
<!-- 一、編輯傳參事件 -->
<button @click="getFatherFn">點擊我給父親傳參</button>
</div>
</template>
<script>
export default {
name: "Emit",
data() {
return {
// 二宙攻、編輯傳的參數(shù)
message:"biubiubiubiubiubiu"
};
},
methods: {
getFatherFn:function(){
console.log("我是兒子奠货,我在給粑粑傳參")
/*
三、傳遞方法:
this.$emit
參數(shù):發(fā)射的事件名座掘、傳的參數(shù)
*/
this.$emit("setSonFn",this.message)
}
},
};
</script>
<style>
</style>
2递惋、父組件接收參數(shù)
<template>
<div id="emitFather">
我是 emitFather
<!-- 一、Emit 接受參數(shù)
屬性:this.$emit 發(fā)射的事件名
-->
<Emit @setSonFn="myFn"></Emit>
</div>
</template>
<script>
import Emit from "@/components/emit/Emit"
export default {
name: "EmitFather",
data() {
return {};
},
components:{
Emit,
},
methods: {
// 二溢陪、獲取參數(shù)
myFn:function(data){
console.log("我是老子萍虽,接收數(shù)據(jù)中")
console.log(data)
}
},
};
</script>
<style></style>