vue中自定义按钮组件为什么要加.native

Question

一直不明白为什么要@click.native = "goback" 我引用过muse-ui里面的自定义组件，很多事件都加了.native 但是我去掉也没关系，只是一直不理解加这个意义是什么。

Answer 1

因为在自定义组件上注册的事件触发的是组件自定义的事件
额 有点绕 举个例子你就明白了

自定义 Button.vue 组件

<template>
  <button type="button" @click="clickHandler"><slot /></button>
</template>

export default {
  name: 'button',
  methods: {
    clickHandler () {
      this.$emit('vclick') // 触发 `vclick` 事件
    }
  }
}

引用 Button.vue 组件

<vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>

import vButton from '@/components/Button'
export default {
  components: { vButton },
  methods: {
    clickHandler () {
      alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
    },
    vClickHandler () {
      alert('onvclick') // 触发 `vclick` 自定义事件
    }
  }
}

如果将上面模版改成

<vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>

那么两个事件都会执行， .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的

至于你说的 muse-ui 中的自定义组件去掉 .native 也可以执行 想必是为了方便做了兼容处理

<template>
  <!-- 此处自定义事件名也叫 `click` 所以在使用组件时加不加 `.native` 修饰符都可以 -->
  <button type="button" @click="$emit('click')"><slot /></button>
</template>