快捷導(dǎo)航

vue使用$emit傳遞參數(shù)方式

更新時間：2024年04月18日 10:55:44 作者：榮~博客

這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue使用$emit傳遞參數(shù)

傳遞一個參數(shù)

1、子組件

this.$emit('getData','abcd')

2、父組件

<child @getData="getData"></child>
getData(data){
	console.log(data) // 'abcd'
}

傳遞多個參數(shù)

第一種方法

1、子組件

let obj = {
	data1: 'abcd',
	data2: 'abcdefg'
}
this.$emit('getData',obj)

2、父組件

<child @getData="getData"></child>
getData(data){
	console.log(data) // {data1:'abcd',data2:'abcdefg'}
}

第二種方法

1、子組件

this.$emit('getData','abcd','abcdefg')

2、父組件

<child @getData="getData(arguments)"></child>
getData(data){
	console.log(data[0],data[1]) // 'abcd' 'abcdefg'
}

對于$emit的用法

可以總結(jié)：

子組件通過$emit的方式，調(diào)用父組件中的事件,進(jìn)行傳遞數(shù)據(jù)
$emit函數(shù)只能在子組件中使用

一、子組件

  <div>
    <!-- 1 給子組件綁定一個點(diǎn)擊事件 -->
    <el-button type="primary" size="small" @click="btnFn">我是子組件</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // 2 聲明事件處理函數(shù)
    btnFn() {
      console.log("點(diǎn)擊到了");
      // 3 子傳父
      // 執(zhí)行$emit函數(shù)，會調(diào)用父組件中名為sonEvent的函數(shù)再將"hello world"的值傳過去
      this.$emit("sonEvent", "hello world");
    },
  },
};
</script>

從上面子組件的代碼上看，我們可以知道，當(dāng)子組件被點(diǎn)擊的時候，會觸發(fā)btnFn事件，再聲明btnFn()事件處理函數(shù)，之后執(zhí)行$emit函數(shù)，該emit函數(shù)會調(diào)用下面父組件中名為sonEvent的事件，并將“hello world”的值傳遞給父組件。

二、父組件

  <div id="app">
    <!-- 4 接收子傳父 @inputFn="fatInput" -->
    <!-- @sonEvent 與子組件this.$emit('sonEvent',...)起的名字一致 -->
    <son @sonEvent="sonFn"></son>
  </div>
</template>

<script>
import son from "./components/son.vue";
export default {
  name: "app",
  components: {
    son,
  },
  methods: {
    // 5 接收參數(shù)
    sonFn(data) {
      console.log(data);
    },
  },
};
</script>

父組件的sonEvent事件被觸發(fā)，調(diào)用sonFn函數(shù)，可以在控制臺上打印接收到子組件傳遞過來的值

三、運(yùn)行結(jié)果

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue?MVVM雙向綁定實(shí)例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時間了,也算對其雙向綁定原理也有了解個大概,這篇文章主要給大家介紹了關(guān)于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關(guān)資料,需要的朋友可以參考下
2022-03-03
使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件問題
這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件,本文是小編給大家總結(jié)的一些表單插件的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07
Vue中的基礎(chǔ)過渡動畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動畫原理解析,需要的朋友可以參考下
2018-12-12
vue獲取el-form的整體驗(yàn)證狀態(tài)
本文主要介紹了vue獲取el-form的整體驗(yàn)證狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue.js實(shí)現(xiàn)下載時暫?；謴?fù)下載
本文主要介紹了Vue.js實(shí)現(xiàn)下載時暫?；謴?fù)下載,通過使用XMLHttpRequest對象來控制下載過程,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決
Pinia是一個Vue.js狀態(tài)管理庫，如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面，Pinia會將store中的數(shù)據(jù)重置為初始值，從而導(dǎo)致數(shù)據(jù)丟失的問題，本文就來介紹一下問題解決，感興趣的可以了解一下
2023-12-12
vue+webpack 更換主題N種方案優(yōu)劣分析
這篇文章主要介紹了vue+webpack 更換主題N種方案優(yōu)劣分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Vuejs實(shí)現(xiàn)購物車功能
這篇文章主要為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue使用Echarts的三種實(shí)現(xiàn)方式
文章介紹了三種在Vue項(xiàng)目中使用ECharts的方法：直接使用原始方法、使用vue-echarts和v-chhart,詳細(xì)描述了每種方法的步驟和優(yōu)勢,幫助開發(fā)者在Vue項(xiàng)目中更方便地地使用ECharts
2026-04-04
LogicFlow內(nèi)置插件使用實(shí)例
這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01