认识

2023年06月10日

柏拉文

越努力，越幸运

一、认识

---

emit 用于发射组件的自定义事件

二、编译细节

---

当使用组件时, 我们可以传递事件 handleChange 事件

<MyComoponent @handleChange="handleChange" />

上述模版对应的 VNode 如下所示:

const VNode = {
  type: MyComponent,
  props: {
    a: "嘻嘻"
    onHandleChange: handleChange
  }
}

可以看到, 自定义事件 handleChange 被编译成名为 onHandleChange 的属性并存储到 props 数据对象中。

三、this.$emit 细节

---

四、setup emit 细节

---

setup emit 用法如下:

setup(props, setupContext) {
    const { emit } = setupContext;

    emit('handleChange', 1, 2);

    const obj = reactive({ a: 1, b: 2 });
    return { obj };
}

setup emit 实现如下:

function mountComponent(vnode,container,anchor){
    const componentOptions = vnode.type;
    const {
      data,
      setup,
      props: propsOption,
      render,
    } = componentOptions;

    beforeCreate && beforeCreate();

    const state = data ? reactive(data()) : null;
    const [props, attrs] = resolveProps(propsOption, vnode.props);

    function emit(event, ...payload) {
      const eventName = `on${event[0].toUpperCase() + event.slice(1)}`;
      const handler = instance.props[eventName];
      if (handler) {
        handler(...payload);
      } else {
        console.log(`${eventName} 事件不存在`);
      }
    }

    const setupContext = { emit, attrs };
    const setupResult = setup(shallowReadonly(instance.props), setupContext);
    ……
}

如上所示, emit 本质就是根据事件名称去 props 数据对象中寻找对应的事件处理函数并执行。