Vue2.x子组件$emit触发父组件自定义事件的问题

发布于 2022-09-13 01:22:09 字数 1420 浏览 32 评论 0

Parent.vue
<template>
  <div id="parent">
    <Child @customEvent="myEvent"></Child>
  </div>
<template>
<script>
export default {
  methods: {
    myEvent (value) {
        console.log(value);
        return this;
    }
  }
}
</script>
Child.vue
<template>
  <div id="child" @click="myChildEvent">
  </div>
<template>
<script>
export default {
  methods: {
    myChildEvent () {
        this.$emit('customEvent', 1);
    }
  }
}
</script>

看了源码,组件在父组件标签上的自定义事件在构建过程中会通过Vue.prototype.$on在子组件实例vm添加_events{eventName:[invoker:fn,...]},(invoker)子组件调用Vue.prototype.$emit的时候会调用invokeWithErrorHandling,处理eventName处理对应invoker函数列表,invoker函数列表的invoker函数通过invoker.fns保存原来的处理函数,执行invoker函数的时候再次invokeWithErrorHandling执行真正的处理函数,

function invokeWithErrorHandling (handler,context,args,vm,info) {
  var res;
  try {
    res = args ? handler.apply(context, args) : handler.call(context);
  }
  ...
  return res
}

上例中最终执行的真正的处理函数是

myEvent (value) {
  console.log(value);
  return this;
}

但是调用invokeWithErrorHandling(fns, null, arguments, vm, "v-on handler")的时候context为null,handler.apply(context, args)在context为null的情况下不是应该执行全局Window对象吗,例如

var c= 6;
var a ={c:2, b:function(){alert(this.c)}}; 
a.b.apply(null); // 6

为什么Vue能够正确的指向父组件实例呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浊酒尽余欢 2022-09-20 01:22:09

因为在父组件初始化的时候就已经永久性的把myEvent绑定在自己身上了,这是bind的特性,不论bind多少次,都是第一次为准

image.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文