uni-app 透传创建的消息不能进入 click 事件

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.3.13

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米9

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```plus.push.addEventListener("receive", function(msg) {
var clent = uni.getSystemInfoSync().platform
console.log("(receive):" + JSON.stringify(msg));
if (clent == 'ios') { //如果是IOS
var payload = msg.payload;
if (msg.aps == null && msg.type == "receive") {
var messageTitle = payload.title;
var messageContent = payload.content;
//创建本地消息,发送的本地消息也会被receive方法接收到，但没有type属性，且aps是null
plus.push.createMessage(messageContent, JSON.stringify(payload), {
title: messageTitle
});
}
// else{
//  var payload = JSON.parse(msg.payload);
//  plus.push.createMessage(payload.messageContent, JSON.stringify(payload.payload), {title: payload.messageTitle});
// }
}
if (clent == 'android') {
//如果是Android，当APP在线时，收到透传消息不会进入系统消息，需要发送本地提醒。
var payload = msg.payload;
var title = payload.title;
var content = payload.content;
plus.push.createMessage(content + JSON.stringify(msg.payload), {title: title });
}
}, false);
plus.push.addEventListener("click", function(msg) {
var clent = uni.getSystemInfoSync().platform
console.log("(click):" + JSON.stringify(msg));
}, false);

操作步骤：就是上面的代码，发送推送

预期结果：能正确进入 click

实际结果：透传创建的消息，不能触发click

zlyuanteng 1楼

请提供服务端，推送消息的请求体。

itying888 2楼

在 uni-app 中，透传（Pass-through）属性通常用于将父组件的属性直接传递给子组件。然而，如果你发现透传的属性无法触发 click 事件，可能是由于以下几个原因：

1. 事件绑定问题

确保你在子组件中正确绑定了 click 事件。例如：

<template>
  <div [@click](/user/click)="handleClick">
    <!-- 子组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Click event triggered');
    }
  }
}
</script>

2. 透传属性未正确传递

确保父组件正确传递了 click 事件。例如：

<template>
  <ChildComponent [@click](/user/click)="handleParentClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleParentClick() {
      console.log('Parent click event triggered');
    }
  }
}
</script>

3. 事件冒泡问题

如果子组件内部有其他元素阻止了事件冒泡，可能会导致 click 事件无法触发。确保没有使用 event.stopPropagation() 或其他阻止事件冒泡的方法。

4. 组件库限制

如果你使用的是第三方组件库，某些组件可能不支持透传 click 事件。你可以查阅相关文档，或者尝试使用 native 修饰符来绑定原生事件：

<template>
  <ChildComponent [@click](/user/click).native="handleParentClick" />
</template>

5. 样式问题

有时候，CSS 样式可能会影响事件的触发。例如，pointer-events: none; 会阻止元素接收点击事件。确保没有类似的样式影响。

6. 组件生命周期

确保组件已经正确挂载，事件绑定在组件挂载之后进行。如果事件绑定在组件挂载之前，可能会导致事件无法触发。

示例代码

以下是一个完整的示例，展示如何正确传递和触发 click 事件：

父组件：

<template>
  <ChildComponent [@click](/user/click)="handleParentClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleParentClick() {
      console.log('Parent click event triggered');
    }
  }
}
</script>

子组件：

<template>
  <div [@click](/user/click)="handleClick">
    Click me
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Child click event triggered');
      this.$emit('click');
    }
  }
}
</script>