vue自定义组件@click点击失效问题及解决

题目描述：

在Vue中使用自定义组件时，可能会遇到组件的@click点击事件无效的问题。这种情况可能出现在多层级嵌套组件、使用模板语法或slot等情况下。本文将提供问题解决的完整攻略，以及两个实际的示例。

解决方案：

在组件上添加v-on:click.native的修饰器可以使@click的点击事件传递到原生DOM上，从而解决失效问题。

具体实现如下：

<!-- 父组件 -->
<template>
  <div>
    <child-component v-on:click.native="handleClick"></child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <button>click me</button>
  </div>
</template>

// 父组件逻辑
export default {
  methods: {
    handleClick() {
      console.log('click')
    }
  }
}

在例子中的父组件中，使用v-on:click.native修饰器，将子组件中的点击事件传递到了原生DOM上，从而使得点击事件生效。

另外，若使用的是slot插槽，则需要在插槽元素上添加v-on:click.native修饰器，如下所示：

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:default>
        <div v-on:click.native="handleClick">click me</div>
      </template>
    </child-component>
  </div>
</template>

以上代码通过在slot插槽的点击元素上添加v-on:click.native修饰器，将点击事件传递到了原生DOM上，从而使得组件的点击事件生效。

示例一：

在下面的示例中，分别展示了使用v-on:click.native修饰器前后的效果：

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <button v-on:click="handleClick">click me</button>
  </div>
</template>

// 父组件逻辑
export default {
  methods: {
    handleClick() {
      console.log('click')
    }
  }
}

在上述代码中，子组件的点击事件并未生效，但若在父组件上添加v-on:click.native修饰器，则事件会生效。

示例二：

在下面的示例中，展示了在使用slot插槽情况下，使用v-on:click.native修饰器的效果：

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <template v-slot:default>
        <div v-on:click.native="handleClick">click me</div>
      </template>
    </child-component>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

// 父组件逻辑
export default {
  methods: {
    handleClick() {
      console.log('click')
    }
  }
}

在上述代码中，使用了slot插槽，且在插槽元素上添加了v-on:click.native修饰器，使得点击事件生效。