vue前端開發(fā)自學(xué),子組件傳遞數(shù)據(jù)給父組件,使用$emit
父子組件之間互相傳遞數(shù)據(jù)的情況非常常見，下面為大家介紹的是，來自子組件，給父組件傳遞數(shù)據(jù)的情況。
<template>
<h3>組件事件demo</h3>
<Child @someEvent="getInfo"/>
<p>我的位置是父:{{ message }}</p>
</template>
<script>
import Child from "./Child.vue"
export default{
data(){
return {
message:""
}
},
components:{
Child
},
methods:{
getInfo(data){
this.message = data
}
}
}
</script>如圖，以上代碼是父組件的代碼情況，ComponentEvent.vue。
可以看出來，里面的特殊點(diǎn)，在于，有個子組件的引用和標(biāo)簽的調(diào)用。
在子組件的標(biāo)簽里面，定義了一個事件，名字有點(diǎn)奇怪，這個就是vue2老版本里面的稱謂：“自定義事件”，其實在這里vue3簡稱了而已。實際上，還是那個東西。改成了一個新名字罷了。叫：“組件事件”。
這個自定義事件的名字，必須和子組件里，你自己定義的名字保持吻合，才能正常傳遞過來數(shù)據(jù)。
<template>
<h3>Child</h3>
<button @click="clickHandle">傳遞數(shù)據(jù)給父組件的按鈕</button>
</template>
<script>
export default{
data(){
return{
msg:"我是子組件的數(shù)據(jù)信息"
}
},
methods:{
clickHandle(){
this.$emit("someEvent",this.msg)
}
}
}
</script>這個代碼就是子組件里面 的內(nèi)容了?？梢钥匆姡锩嫖覀冇幸粋€按鈕綁定了一個點(diǎn)擊事件，這個點(diǎn)擊事件，會觸發(fā)一個，this.$emit()，這個東西，就是給父組件傳遞，數(shù)據(jù)使用的！前面是一個字符串的數(shù)據(jù)（事件的名字）。后面是數(shù)據(jù)信息（父組件里面即將接受到的數(shù)據(jù)信息）。
文章來源：http://www.zghlxwxcb.cn/news/detail-816813.html
如圖，點(diǎn)擊按鈕，就可以看見，在父組件里，確實是接受到了來自子組件傳遞過來的信息了。文章來源地址http://www.zghlxwxcb.cn/news/detail-816813.html
到了這里，關(guān)于vue前端開發(fā)自學(xué),子組件傳遞數(shù)據(jù)給父組件,使用$emit的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
