emit support multiple -

example/components/componentEmit.js/App.js

@@ -17,6 +17,10 @@ export default {
           console.log("---------------change------------------");
           console.log(a, b);
         },
+        onChangePageName(a, b) {
+          console.log("---------------change-page-name------------------");
+          console.log(a, b);
+        },
       }),
     ]);
   },

example/components/componentEmit.js/Child.js

@@ -2,7 +2,9 @@ import { h, ref, reactive } from "../../../lib/mini-vue.esm.js";
 export default {
   name: "Child",
   setup(props, { emit }) {
-    emit("change", "aaaaa","bbbbbb");
+    emit("change", "aaaaa", "bbbbbb");
+    // 支持多个 -
+    emit("change-page-name", "start", "game");
   },
   render() {
     return h("div", {}, "child");

src/runtime-core/component.ts

@@ -9,7 +9,7 @@ export function createComponentInstance(vnode) {
     isMounted: false,
     attrs: {}, // 存放 attrs 的数据
     slots: {}, // 存放插槽的数据
-    emit: () => {}, // TODO 需要实现 emit 函数
+    emit: () => {},
   };
 
   // 赋值 emit

src/runtime-core/componentEmits.ts

@@ -1,10 +1,12 @@
+import { camelize, toHandlerKey } from "../shared/index";
 export function emit(instance, event: string, ...rawArgs) {
   // 1. emit 是基于 props 里面的 onXXX 的函数来进行匹配的
   // 所以我们先从 props 中看看是否有对应的 event handler
   const props = instance.props;
   // ex: event -> click 那么这里取的就是 onClick
+  // 让事情变的复杂一点如果是烤肉串命名的话，需要转换成  change-page -> changePage
   // 需要得到事件名称
-  const handlerName = "on" + event.charAt(0).toUpperCase() + event.slice(1);
+  const handlerName = toHandlerKey(camelize(event));
   const handler = props[handlerName];
   if (handler) {
     handler(...rawArgs);

src/shared/index.ts

@@ -1 +1,24 @@
 export * from "./shapeFlags";
+
+const camelizeRE = /-(\w)/g;
+/**
+ * @private
+ * 把烤肉串命名方式转换成驼峰命名方式
+ */
+export const camelize = (str: string): string => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ""));
+};
+
+/**
+ * @private
+ * 首字母大写
+ */
+export const capitalize = (str: string) =>
+  str.charAt(0).toUpperCase() + str.slice(1);
+
+/**
+ * @private
+ * 添加 on 前缀，并且首字母大写
+ */
+export const toHandlerKey = (str: string) =>
+  str ? `on${capitalize(str)}` : ``;