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

//Super.vue


//Child.vue


结论:

  • 首先: 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中的参数可以随意命名,不受限制

你可能感兴趣的:(vue.js)