快捷導(dǎo)航

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

更新時(shí)間：2023年02月02日 09:18:44 作者：清風(fēng)細(xì)雨_林木木

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

前言

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

1.只有子組件傳值（單個(gè)、多個(gè)）

寫法一：（自由式）

// 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ù)一一對應(yīng)。

寫法二：（arguments寫法）

// child組件，在子組件中觸發(fā)事件并傳多個(gè)參數(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ā)事件并傳多個(gè)參數(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>

總結(jié)：