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

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

阅读 5.2k
评论 2017-09-15 提问
    1 个回答
    • 5.5k

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

    自定义 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>