uni-app 编译出的抖音小程序元素点击事件回调中无法访问slot作用域

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 编译出的抖音小程序元素点击事件回调中无法访问slot作用域

项目信息 详情
产品分类 uniapp/小程序/字节跳动
PC开发环境 Mac
PC开发环境版本 12.5 (21G72)
第三方开发者工具 4.2.9
基础库版本 3.0.0
项目创建方式 CLI
CLI版本 1.92.2 (Universal)

示例代码：

A.vue  定义一个带插槽的组件

<div>  
 <slot :x="a">  
</div>  
<script setup>  
const a = 1;  
</script>

b.vue 使用A组件

<template>  
<A>  
 <template v-slot="slotprops">  
<view @click="()=>"{
//在事件回调方法里访问slotprops，在微信小程序上没问题，在抖音小程序上会导致整个click回调方法不被执行  
console.log(slotprops)  
}" >  

</template>  
</A>  
</template>

操作步骤：

定义一个带插槽的组件，给插槽传值，在另一个vue文件中引入A组件并使用它。如上代码示例。

预期结果：

编译出的抖音小程序，可以在事件回调中访问插槽作用域

实际结果：

编译出的微信小程序，可以在事件回调中访问插槽作用域；但抖音小程序，不可以。

bug描述：

定义一个带插槽的组件，给插槽传值，在另一个vue文件中引入组件并使用它。如下代码示例。编译出的抖音小程序，在元素的点击事件回调中，无法访问slot作用域，微信小程序是可以的。希望抖音也可以。


Harmonyos Next教程
3 回复

解决了吗.我也遇到同样的问题


没呢，只能先换个写法了，通过ref来直接读取A的值或者调方法

在uni-app开发抖音小程序时，确实可能会遇到在元素点击事件回调中无法直接访问slot作用域的问题。这通常是因为在编译过程中，slot内容的作用域和事件绑定组件的作用域可能并不一致。以下是一个示例代码，展示了如何通过其他方式来解决这个问题。

假设我们有一个父组件ParentComponent.vue，它使用了一个子组件ChildComponent.vue，并且子组件中有一个slot，我们希望在点击slot中的内容时能够访问到slot的作用域数据。

ParentComponent.vue

<template>
  <view>
    <child-component @click-in-slot="handleClickInSlot">
      <template v-slot:default="slotProps">
        <button @click="emitClick(slotProps)">Click Me</button>
      </template>
    </child-component>
  </view>
</template>

<script>
export default {
  methods: {
    emitClick(slotProps) {
      this.$emit('click-in-slot', slotProps);
    },
    handleClickInSlot(slotProps) {
      console.log('Slot props received:', slotProps);
    }
  }
}
</script>

ChildComponent.vue

<template>
  <view>
    <slot @click.native="$emit('click-in-slot', $event)"></slot>
  </view>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

注意：上面的代码示例中，直接在ChildComponent.vue中使用@click.native可能并不适用于所有情况，特别是在小程序环境中，因为小程序的组件事件机制与Vue有所不同。这里主要是展示一种思路，即通过一个中间事件来传递数据。

在实际的小程序开发中，由于小程序的组件化机制限制，我们可能需要调整策略。一种可行的解决方案是，在父组件中通过v-slot插槽传递一个处理函数给子组件，然后在子组件的插槽内容中直接调用这个函数，并将所需的数据作为参数传递。

由于uni-app编译小程序时会有特定的转换逻辑，确保你的uni-app和HBuilderX等工具是最新版本，以利用最新的编译优化和功能支持。如果问题依然存在，考虑查阅uni-app官方文档或社区，看看是否有相关的issue或workaround。

以上代码示例主要为了展示一种解决思路，并非直接可用的解决方案，因为小程序的特性可能会导致直接实现上的不同。在实际项目中，需要根据具体情况进行调整。

回到顶部