Vue.js中为自定义组件绑定vue-touch-events自定义事件的问题

看起来你遇到的核心问题是直接在自定义组件标签上使用v-touch指令导致的意外触发和无限循环，同时还有组件间事件传参的困惑。我来一步步帮你解决：

一、为什么会出现无限循环和自动触发？ #

v-touch指令如果直接绑定在自定义组件标签上，Vue在渲染组件时可能会误把指令的初始化逻辑当成触发事件的信号，加上你的toggleBombMarker方法会修改field.isMarked这个响应式属性，属性变化又会触发组件重新渲染，进而再次触发指令逻辑，形成无限循环。

另外，自定义组件的事件绑定需要注意：原生指令（包括v-touch）更适合绑定在真实DOM元素上，而不是组件标签上。

二、正确的实现方案：组件内部处理触摸事件，通过自定义事件传参 #

我们把触摸事件的监听放到m-field组件内部，然后通过自定义事件把对应的field对象传递给父组件，这样既避免了意外触发，也能正确传递数据。

1. 修改m-field组件 #

在组件的根DOM元素上绑定v-touch:longtap，然后触发自定义事件：

<template>
  <!-- 假设组件根元素是一个div，绑定触摸事件 -->
  <div 
    class="field"
    v-touch:longtap="handleLongtap"
    @click="$emit('open')"
    @contextmenu.prevent="$emit('toggle-marker')"
  >
    <!-- 你的格子内容渲染 -->
  </div>
</template>

<script>
export default {
  props: ['field'],
  methods: {
    handleLongtap() {
      // 触发自定义事件，把当前field对象传出去
      this.$emit('longtap', this.field);
    }
  }
}
</script>

这里我顺便把右键点击和普通点击也改成了组件内部触发自定义事件，这样父组件的代码会更简洁，也符合组件封装的原则。

2. 修改父组件的调用逻辑 #

去掉组件标签上的v-touch和原生事件绑定，换成监听组件的自定义事件：

<m-field 
  v-for="field in row" 
  :field="field" 
  :key="`${field.x},${field.y}`"
  @open="open(field)"
  @toggle-marker="toggleBombMarker(field)"
  @longtap="toggleBombMarker(field)"
></m-field>

3. 确保vue-touch-events正确注册 #

别忘了在项目入口文件（比如main.js）中注册插件：

import Vue from 'vue';
import VueTouchEvents from 'vue-touch-events';

Vue.use(VueTouchEvents);

三、额外优化建议：确保field对象是响应式的 #

你用构造函数创建的Field对象，默认不是Vue的响应式对象，虽然目前游戏运行正常，但后续修改属性时可能出现视图不更新的问题。可以改成用Vue.observable包装一下：

let Field = function (x, y) {
  this.x = x;
  this.y = y;
  this.isOpen = false;
  this.hasBomb = false;
  this.isMarked = false;
  this.numNeighbourBombs = null;
};

// 创建field时用Vue.observable包装
const createField = (x, y) => Vue.observable(new Field(x, y));
export default createField;

这样所有field的属性变化都会被Vue追踪，确保视图能及时更新。

按照这个方案修改后，长按标记的功能应该就能正常工作，也不会再出现无限循环的问题了。

内容的提问来源于stack exchange，提问作者connexo