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
Vue面試必備之防抖和節(jié)流的使用
在這篇文章中，大家會(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)行為的具體使用方法
本篇文章主要介紹了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)于element的表單組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
Element使用el-table組件二次封裝
這篇文章主要為大家介紹了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