vue中$emit傳遞多個參(arguments和$event)

更新時間：2023年02月02日 09:18:44 作者：清風細雨_林木木

本文主要介紹了vue中$emit傳遞多個參(arguments和$event)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

使用 $emit 從子組件傳遞數(shù)據(jù)到父組件時，主要有以下3類情況

1.只有子組件傳值（單個、多個）

寫法一：（自由式）

// child組件，在子組件中觸發(fā)事件
this.$emit('handleFather', '子參數(shù)1','子參數(shù)2','子參數(shù)3')
// father組件，在父組件中引用子組件
<child @handleFather="handleFather"></child>
<script>
export default {
   components: {
    child,
   }
   methods: {
     handleFather(param1,param2,param3) {
         console.log(param) // 
     }
   }
 }
 </script>

解析：

只有子組件傳值；
注意@引用函數(shù)不需要加“括號”；
子組件傳值和父組件方法的參數(shù)一一對應。

寫法二：（arguments寫法）

// child組件，在子組件中觸發(fā)事件并傳多個參數(shù)
this.$emit('handleFather', param1, param2,)
//father組件，在父組件中引用子組件
<child @handleFather="handleFather(arguments)"></child>
<script>
  export default {
    components: {
     child,
    }
    methods: {
      handleFather(param) {
          console.log(param[0]) //獲取param1的值
          console.log(param[1]) //獲取param2的值
      }
    }
  }
</script>

解析：

只有子組件傳值；
注意@引用函數(shù)添加“arguments”值；
打印出子組件傳值的數(shù)組形式。

2.子組件傳值，父組件也傳值

寫法一：

// child組件，在子組件中觸發(fā)事件
this.$emit('handleFather', '子參數(shù)對象')
//father組件，在父組件中引用子組件
<child @handleFather="handleFather($event, fatherParam)"></child>
 
<script>
 export default {
   components: {
    child,
   }
   methods: {
     handleFather(childObj, fatherParam) {
         console.log(childObj) // 打印子組件參數(shù)（對象）
         console.log(fatherParam) // 父組件參數(shù)
     }
   }
 }
</script>

寫法二：

// child組件，在子組件中觸發(fā)事件并傳多個參數(shù)
this.$emit('handleFather', param1, param2,)
//father組件，在父組件中引用子組件
<child @handleFather="handleFather(arguments, fatherParam)"></child>

<script>
?export default {
? ?components: {
? ? child,
? ?}
? ?methods: {
? ? ?handleFather(childParam, fatherParam) {
? ? ? ? ?console.log(childParam) //獲取arguments數(shù)組參數(shù)
? ? ? ? ?console.log(fatherParam) //獲取fatherParam
? ? ?}
? ?}
?}
</script>

總結：

只有子組件傳參，@調用方法不使用“括號”
特殊使用“arguments”和“$event”，
arguments 獲取子參數(shù)的數(shù)組
$event 獲取自定義對象，滿足傳多個參數(shù)

到此這篇關于vue中$emit傳遞多個參(arguments和$event)的文章就介紹到這了,更多相關vue $emit傳遞多個參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決vue-router 嵌套路由沒反應的問題
這篇文章主要介紹了解決vue-router 嵌套路由沒反應的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
iview在vue-cli3如何按需加載的方法
這篇文章主要介紹了iview在vue-cli3如何按需加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
詳解vue 自定義組件使用v-model 及探究其中原理
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
vue v-model實現(xiàn)自定義樣式多選與單選功能
這篇文章主要介紹了vue v-model實現(xiàn)自定義樣式多選與單選功能所遇到的問題,本文給大家?guī)砹私鉀Q思路和實現(xiàn)代碼，需要的朋友可以參考下
2018-07-07
Vue3中使用混入(Mixin)的示例詳解
混入（Mixin）是?Vue?中一種代碼復用的模式,允許將組件的選項抽離為獨立模塊,下面就跟隨小編一起來深入了解下如何在Vue3中使用混入Mixin吧
2025-03-03
Vue解析剪切板圖片并實現(xiàn)發(fā)送功能
這篇文章主要介紹了Vue解析剪切板圖片并實現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-02-02
vue $nextTick實現(xiàn)原理深入詳解
這篇文章主要介紹了vue $nextTick實現(xiàn)原理深入詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-10-10
Vue核心概念Getter的使用方法
今天小編就為大家分享一篇關于Vue核心概念Getter的使用方法，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
Vue2.0使用嵌套路由實現(xiàn)頁面內容切換/公用一級菜單控制頁面內容切換(推薦)
這篇文章主要介紹了Vue2.0使用嵌套路由實現(xiàn)頁面內容切換/公用一級菜單控制頁面內容切換,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-05-05