博客

错误示例

<template>
  <div>
    <Buttom text="确定" @click="handler()"></Buttom>
    <input type="button" @click="handler()" value="确定" />
  </div>
</template>

import { Component, Prop, Vue } from "vue-property-decorator";
import Buttom from "@/components/buttom/Buttom.vue";//自定义组件
@Component({ name: "", components: { Buttom } })
export default class index extends Vue {
  handler() {
    alert("提示");
  }
}

描述

** 调用自定义组件上绑定的@click=“handler()” 事件不成功**

正确示例

<template>
  <div>
    <Buttom text="确定" @click.native="handler()"></Buttom>
    <input type="button" @click="handler()" value="确定" />
  </div>
</template>

import { Component, Prop, Vue } from "vue-property-decorator";
import Buttom from "@/components/buttom/Buttom.vue";//自定义组件
@Component({ name: "", components: { Buttom } })
export default class index extends Vue {
  handler() {
    alert("提示");
  }
}

解释

如果你想在某个组件的根元素上绑定事件，直接使用 @click=”handler()”是没法调用到原生onclick事件，所以vue提供了native 修饰符，通过native可以直接监听组件根元素的原生事件，我们可以添加native修饰符来实现click事件例如： @click.native=“handler()”，