fix(uni-mp-xhs): 解决小红书平台自定义组件问题

dcloudio · May 22, 2024 · f3b71c8 · f3b71c8
1 parent 516410a
commit f3b71c8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/packages/uni-mp-vue/dist/vue.runtime.esm.js b/packages/uni-mp-vue/dist/vue.runtime.esm.js
@@ -7106,7 +7106,7 @@ function setRef$1(instance, isUnmount = false) {
       (templateRef) => setTemplateRef(templateRef, null, setupState)
     );
   }
-  const check = $mpPlatform === "mp-baidu" || $mpPlatform === "mp-toutiao";
+  const check = $mpPlatform === "mp-baidu" || $mpPlatform === "mp-toutiao" || $mpPlatform === "mp-xhs";
   const doSetByRefs = (refs) => {
     const mpComponents = (
       // 字节小程序 selectAllComponents 可能返回 null
@@ -7774,13 +7774,19 @@ function vOn(value, key) {
     const instance = getCurrentInstance();
     const ctx = instance.ctx;
     // 微信小程序，QQ小程序，当 setData diff 的时候，若事件不主动同步过去，会导致事件绑定不更新，（question/137217）
-    const extraKey = typeof key !== 'undefined' &&
-        (ctx.$mpPlatform === 'mp-weixin' ||
-            ctx.$mpPlatform === 'mp-qq' ||
-            ctx.$mpPlatform === 'mp-xhs') &&
+    let extraKey = typeof key !== 'undefined' &&
+        (ctx.$mpPlatform === 'mp-weixin' || ctx.$mpPlatform === 'mp-qq') &&
         (isString(key) || typeof key === 'number')
         ? '_' + key
         : '';
+    // 解决小红书平台可能出现自定义组件事件错乱问题
+    // @ts-expect-error: ctx.$mpType
+    const needExtraKey = ctx.$mpPlatform === 'mp-xhs' && ctx.$mpType === 'component';
+    const eiCounter = instance.$ei++;
+    if (needExtraKey) {
+        // @ts-expect-error: ctx.componentId
+        extraKey = '_' + ctx.componentId + '_' + eiCounter;
+    }
     const name = 'e' + instance.$ei++ + extraKey;
     const mpInstance = ctx.$scope;
     if (!value) {

diff --git a/packages/uni-mp-vue/lib/vue.runtime.esm.js b/packages/uni-mp-vue/lib/vue.runtime.esm.js
@@ -4744,7 +4744,7 @@ function setRef(instance, isUnmount = false) {
       (templateRef) => setTemplateRef(templateRef, null, setupState)
     );
   }
-  const check = $mpPlatform === "mp-baidu" || $mpPlatform === "mp-toutiao";
+  const check = $mpPlatform === "mp-baidu" || $mpPlatform === "mp-toutiao" || $mpPlatform === "mp-xhs";
   const doSetByRefs = (refs) => {
     const mpComponents = (
       // 字节小程序 selectAllComponents 可能返回 null

diff --git a/packages/uni-mp-vue/src/helpers/vOn.ts b/packages/uni-mp-vue/src/helpers/vOn.ts
@@ -27,15 +27,23 @@ export function vOn(value: EventValue | undefined, key?: number | string) {
   }
   const ctx = instance.ctx
   // 微信小程序，QQ小程序，当 setData diff 的时候，若事件不主动同步过去，会导致事件绑定不更新，（question/137217）
-  const extraKey =
+  let extraKey =
     typeof key !== 'undefined' &&
-    (ctx.$mpPlatform === 'mp-weixin' ||
-      ctx.$mpPlatform === 'mp-qq' ||
-      ctx.$mpPlatform === 'mp-xhs') &&
+    (ctx.$mpPlatform === 'mp-weixin' || ctx.$mpPlatform === 'mp-qq') &&
     (isString(key) || typeof key === 'number')
       ? '_' + key
       : ''
 
+  // 解决小红书平台可能出现自定义组件事件错乱问题
+  const needExtraKey =
+    // @ts-expect-error: ctx.$mpType
+    ctx.$mpPlatform === 'mp-xhs' && ctx.$mpType === 'component'
+  const eiCounter = instance.$ei++
+  if (needExtraKey) {
+    // @ts-expect-error: ctx.componentId
+    extraKey = '_' + ctx.componentId + '_' + eiCounter
+  }
+
   const name = 'e' + instance.$ei++ + extraKey
 
   const mpInstance = ctx.$scope