uni-app运行到小程序中动态绑定事件名称报错

uni-app运行到小程序中动态绑定事件名称报错

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

操作步骤：

给button动态绑定事件名，运行到小程序端报错

预期结果：

正常绑定事件

实际结果：

运行报错

bug描述：

<button class="btn_text"  
     @[eventName]="goProfile">fevfeh  
    </button>  
eventName:'click'
```

更多关于uni-app运行到小程序中动态绑定事件名称报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

没有这种写法吧？ 就算其他段端能用 编译到微信小程序也是不对的 因为小程序的原生写的是bindclick是一个整体 uniapp编译前@[eventName]=“goProfile” 编译后就会变成bind[eventName]=“goProfile” bind[eventName]这个写法很明显是不对的

更多关于uni-app运行到小程序中动态绑定事件名称报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


h5是支持的哦，看下vue官网哈

这个得看官方支不支持了

回复 小小菜76055421: 不用看了 微信小程序肯定用不了的

应该有下面这报错吧 v-on:[event]="" is not supported.

在 uni-app 中，如果你尝试在小程序环境下动态绑定事件名称，可能会遇到报错。这是因为小程序平台（如微信小程序）对事件绑定的处理方式与 uni-app 的预期有所不同。

问题描述

在 uni-app 中，你可能会尝试这样动态绑定事件：

<template>
  <view @[eventName]="handleEvent">Click me</view>
</template>

<script>
export default {
  data() {
    return {
      eventName: 'tap'
    };
  },
  methods: {
    handleEvent() {
      console.log('Event triggered');
    }
  }
};
</script>

在小程序环境下，这种动态绑定事件名称的方式可能会报错，因为小程序不支持直接使用 @[eventName] 这种方式来动态绑定事件。

解决方案

  1. 使用条件渲染：你可以通过 v-if 或 v-show 来根据条件渲染不同的事件绑定。

    <template>
  <view v-if="eventName === 'tap'" @tap="handleEvent">Click me</view>
  <view v-else-if="eventName === 'click'" @click="handleEvent">Click me</view>
</template>

<script>
export default {
  data() {
    return {
      eventName: 'tap'
    };
  },
  methods: {
    handleEvent() {
      console.log('Event triggered');
    }
  }
};
</script>

  2. 使用动态事件处理函数：你可以根据事件名称动态调用不同的处理函数。

    <template>
  <view @tap="handleTap" @click="handleClick">Click me</view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      if (this.eventName === 'tap') {
        this.handleEvent();
      }
    },
    handleClick() {
      if (this.eventName === 'click') {
        this.handleEvent();
      }
    },
    handleEvent() {
      console.log('Event triggered');
    }
  }
};
</script>

  3. 使用 ref 和 $refs：你可以通过 ref 和 $refs 来动态绑定事件。

    <template>
  <view ref="myView">Click me</view>
</template>

<script>
export default {
  mounted() {
    this.$refs.myView.$on(this.eventName, this.handleEvent);
  },
  beforeDestroy() {
    this.$refs.myView.$off(this.eventName, this.handleEvent);
  },
  methods: {
    handleEvent() {
      console.log('Event triggered');
    }
  }
};
</script>
回到顶部