fix: slot 中嵌套组件和event失效

fantianyu25 · Apr 13, 2018 · 061f4d3 · 061f4d3
1 parent 89445c3
commit 061f4d3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 16 deletions.
diff --git a/packages/mpvue-template-compiler/build.js b/packages/mpvue-template-compiler/build.js
@@ -1676,7 +1676,6 @@ function handleError (err, vm, info) {
 }
 
 /*  */
-/* globals MutationObserver */
 
 // can we use __proto__?
 var hasProto = '__proto__' in {};
@@ -4352,15 +4351,15 @@ function transformDynamicClass (staticClass, clsBinding) {
   var result = babel.transform(("!" + clsBinding), { plugins: [transformObjectToTernaryOperator] });
   // 先实现功能，再优化代码
   // https://github.com/babel/babel/issues/7138
-  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, "");
+  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, '');
   return (staticClass + " {{" + cls + "}}")
 }
 
 function transformDynamicStyle (staticStyle, styleBinding) {
   if ( staticStyle === void 0 ) staticStyle = '';
 
   var result = babel.transform(("!" + styleBinding), { plugins: [transformObjectToString] });
-  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, "");
+  var cls = prettier.format(result.code, { semi: false, singleQuote: true }).slice(1).slice(0, -1).replace(/\n|\r/g, '');
   return (staticStyle + " {{" + cls + "}}")
 }
 
@@ -4863,7 +4862,8 @@ function compileToWxml (compiled, options) {
     slot.code = generate$2(slot.node, options);
   });
 
-  return { code: code, compiled: compiled, slots: slots }
+  // TODO: 后期优化掉这种暴力全部 import，虽然对性能没啥大影响
+  return { code: code, compiled: compiled, slots: slots, importCode: importCode }
 }
 
 /*  */

diff --git a/packages/mpvue/index.js b/packages/mpvue/index.js
@@ -476,7 +476,6 @@ function handleError (err, vm, info) {
 }
 
 /*  */
-/* globals MutationObserver */
 
 // can we use __proto__?
 var hasProto = '__proto__' in {};
@@ -5342,7 +5341,20 @@ function getHandle (vnode, eventid, eventTypes) {
   var children = ref.children; if ( children === void 0 ) children = [];
   var componentInstance = ref.componentInstance;
   if (componentInstance) {
-    return res
+    // 增加 slot 情况的处理
+    // Object.values 会多增加几行编译后的代码
+    Object.keys(componentInstance.$slots).forEach(function (slotKey) {
+      var slot = componentInstance.$slots[slotKey];
+      var slots = Array.isArray(slot) ? slot : [slot];
+      slots.forEach(function (node) {
+        res = res.concat(getHandle(node, eventid, eventTypes));
+      });
+    });
+  } else {
+    // 避免遍历超出当前组件的 vm
+    children.forEach(function (node) {
+      res = res.concat(getHandle(node, eventid, eventTypes));
+    });
   }
 
   var attrs = data.attrs;
@@ -5359,10 +5371,6 @@ function getHandle (vnode, eventid, eventTypes) {
     return res
   }
 
-  children.forEach(function (node) {
-    res = res.concat(getHandle(node, eventid, eventTypes));
-  });
-
   return res
 }
 

diff --git a/src/platforms/mp/compiler/codegen/index.js b/src/platforms/mp/compiler/codegen/index.js
@@ -20,5 +20,6 @@ export function compileToWxml (compiled, options = {}) {
     slot.code = generate(slot.node, options)
   })
 
-  return { code, compiled, slots }
+  // TODO: 后期优化掉这种暴力全部 import，虽然对性能没啥大影响
+  return { code, compiled, slots, importCode }
 }
diff --git a/src/platforms/mp/runtime/events.js b/src/platforms/mp/runtime/events.js
@@ -27,7 +27,20 @@ function getHandle (vnode, eventid, eventTypes = []) {
 
   const { data = {}, children = [], componentInstance } = vnode || {}
   if (componentInstance) {
-    return res
+    // 增加 slot 情况的处理
+    // Object.values 会多增加几行编译后的代码
+    Object.keys(componentInstance.$slots).forEach(slotKey => {
+      const slot = componentInstance.$slots[slotKey]
+      const slots = Array.isArray(slot) ? slot : [slot]
+      slots.forEach(node => {
+        res = res.concat(getHandle(node, eventid, eventTypes))
+      })
+    })
+  } else {
+    // 避免遍历超出当前组件的 vm
+    children.forEach(node => {
+      res = res.concat(getHandle(node, eventid, eventTypes))
+    })
   }
 
   const { attrs, on } = data
@@ -43,10 +56,6 @@ function getHandle (vnode, eventid, eventTypes = []) {
     return res
   }
 
-  children.forEach(node => {
-    res = res.concat(getHandle(node, eventid, eventTypes))
-  })
-
   return res
 }