Vue?關(guān)于$emit與props的使用示例代碼
更新時(shí)間：2022年03月23日 15:28:27 作者：閑適_
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧
一、props 和 $emit
1、子組件向父組件傳值，通過$emit 事件向父組件發(fā)送消息，將自己的數(shù)據(jù)傳遞給父組件。
2、props 可以在組件上注冊(cè)一些自定義屬性。父組件通過綁定該屬性來向子組件傳入數(shù)據(jù)，子組件通過 props 屬性獲取對(duì)應(yīng)數(shù)據(jù)。
二、示例
1.父組件
// parent.vue
<template>
<div>
<p>childMessage: {{childMessage}}</p>
<children :sendmessage='childMessage' @showMsg="updataMsg"></children>
</div>
</template>
import children from '/*...*/'
export default{
data () {
return {
childMessage: '父組件給子組件傳值'
}
},
methods: {
updataMsg(message) {
this.childMessage = message
console.log(this.childMessage)
components: {
children
}
}2.子組件
// children.vue
<template>
<div>
// 通過按鈕點(diǎn)擊事件將子組件的值傳給父組件
<button @click="sendtoParent">Click this Button</button>
</div>
</template>
<script>
export default {
props: ['sendmessage'],
methods: {
sendtoParent() {
//$emit括號(hào)里的第一個(gè)參數(shù)為自定義事件
this.$emit('showMsg','子組件通過$emit給父組件傳值')
}
}
}
</script>
結(jié)果展示
父子組件通信之前
父子組件通信之后
到此這篇關(guān)于Vue 關(guān)于$emit與props的使用的文章就介紹到這了,更多相關(guān)Vue $emit與props的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談Vue中的this.$store.state.xx.xx
這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
在這篇文章中，大家會(huì)了解到如何在 Vue 組件中使用防抖和節(jié)流控制 觀察者（watchers）以及事件處理程序，文中的示例代碼簡(jiǎn)潔易懂，希望對(duì)大家有所幫助2023-03-03
vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要介紹了Vue 滾動(dòng)行為的具體使用方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)
本文主要介紹了element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時(shí),可以通過suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動(dòng)可能會(huì)導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認(rèn)行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶體驗(yàn)2024-09-09
這篇文章主要給大家介紹了關(guān)于element的表單組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家介紹了Element使用el-table組件二次封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue配置文件自動(dòng)生成路由和菜單實(shí)例代碼
因?yàn)椴煌挠脩粲胁煌臋?quán)限,能訪問的頁面是不一樣的,所以我們?cè)趯懞笈_(tái)管理系統(tǒng)時(shí)就會(huì)遇過這樣的需求：根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單，這篇文章主要給大家介紹了關(guān)于vue配置文件自動(dòng)生成路由和菜單的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯(cuò)問題，需要的朋友可以參考下2024-02-02