VUE自定义事件中，关于子组件传递多个参数的同时，父组件又要传递额外的参数的实践

//Super.vue
<template>
  <div>
    <child-event @getEvent="handlerEvent1"></child-event>
    <child-event @getEvent="handlerEvent2($event)"></child-event>
    <child-event @getEvent="handlerEvent3(1)"></child-event>
    <child-event @getEvent="handlerEvent4($event,1)"></child-event>
    <child-event @getEvent="handlerEvent5($event,1,2)"></child-event>
  </div>
</template>

<script>
import ChildEvent from "./Child.vue";
export default {
  components: {
    ChildEvent
  },
  methods: {
    handlerEvent1(ar1, ar2) {
      console.log(ar1, ar2); //参数一 参数二
    },
    handlerEvent2($event) {
      console.log($event); //参数一
    },
    handlerEvent2(ar) {
      console.log(ar); //参数一
    },
    handlerEvent3($event) {
      console.log($event); //1
    },
    handlerEvent3(ar) {
      console.log(ar); //1
    },

    handlerEvent4(ar1, ar2) {
      console.log(ar1, ar2); //参数一 1
    },
    handlerEvent5(ar1, ar2, ar3) {
      console.log(ar1, ar2, ar3); //参数一 1 2
    }
  }
};
</script>

//Child.vue

<template>
  <div>
    <button @click="setEvent">自定义事件传参</button>
  </div>
</template>
<script>
export default {
  methods: {
    setEvent() {
      this.$emit("getEvent", "参数一", "参数二");     
      //this.$emit("getEvent", { ar1: "参数一", ar2: "参数二" }); //子组件传递多个参数的同时，父组件又要传递额外的参数
    }
  }
};
</script>

结论：

• 首先: methods中定义的参数只和html中的参数起到对应作用，用$event或普通参数表示不区别

• 其次：在html中定义的handlerEvent传参方式会决定能否得到子组件传递的数据

  • handlerEvent无参数，methods得到的参数顺序和子组件传递的参数顺序一致
  • handlerEvent一个参数，如果传入的一个变量，methods得到的参数是该变量的值;如果传入的是$event，methods得到的参数是子组件传递的第一个参数的值
  • handlerEvent多个参数，如果希望得到子组件的参数，那么handlerEvent的第一个参数必须是$event，$event得到的是子组件传递的第一个参数。如果希望得到子组件传递的更多的参数，需要将this.$emit("getEvent", "参数一", "参数二");改写为this.$emit("getEvent", { ar1: "参数一", ar2: "参数二" });
• 自定义事件传参大部分情况下都比较好理解，唯有在子组件传递多个参数的同时，父组件又要传递额外的参数的情况下比较复杂。这种情况下我们只能改写子组件的参数为一个Object或Array，并且通过$event得到子组件传递的参数。但是methods中的参数可以随意命名，不受限制