Javascript 事件上的Vue.native有时需要，有时不需要（在同一组件中）

我只是在运行vue应用程序时遇到了一些我不理解的事情。 我有一个按钮，它包含在多个父组件中。 我刚刚为

mouseover

和

mouseout

添加了一些事件监听器

在一种情况下，我必须使用

.native

调用函数，当按钮组件在另一个父级中使用时，我必须将其保留以供调用

为了完整起见，我将模板的所有内容都放在这里：

<template>
  <component
    :is="computedType"
    ref="button"
    :class="[$options.name, { 'is-reversed': reversed, 'is-naked': naked, 'is-disabled': disabled, 'has-inverted-textcolor': invertedTextColor }]"
    :style="backgroundColor ? `background-color: ${backgroundColor}` : false"
    :disabled="disabled"
    :aria-disabled="disabled"
    :to="!external ? to : false"
    :aria-controls="ariaControls"
    :aria-expanded="ariaExpanded"
    :target="!target && external && mailto ? '_blank' : target"
    :type="computedType === 'button' ? buttonType : false"
    :rel="external ? 'noopener' : false"
    @click="click"
    @mouseover.native="triggerHover"
    @mouseout.native="releaseHover"
    @mouseover="triggerHover"
    @mouseout="releaseHover"
  >
    <slot />
  </component>
</template>

这就是我需要

.native

的地方，我必须通过

此。$refs.按钮。$el

：

<template>
  <div class="Storyboard">

    <BHeading v-if="component.main_title" :level="3" class="Storyboard__heading Storyboard__BHeading">{{ component.main_title }}</BHeading>

    <div v-for="(item, index) in component.four_column_layout" :key="index" class="Storyboard__item--four-columns">

      <BRichtext v-if="item.text" class="Storyboard__richtext Storyboard__BRichtext" :content="item.text" />
      <BBtn
        v-if="item.button.button_checkbox"
        class="TwoColumnModule__BBtn"
        :inverted-text-color="item.button.button_text_color"
        :background-color="item.button.button_color"
        :target="item.button.button_link.target"
        :to="checkLinkIfInternal(item.button.button_link.url) ? prepareNuxtLink(item.button.button_link.url) : item.button.button_link.url"
        :external="checkIfTypeButton()"
        :href="checkLinkIfInternal(item.button.button_link.url) ? false : item.button.button_link.url"
        :hover-color="item.button.button_color_hover"
      >
        {{ item.button.button_link.title }}
      </BBtn>
    </div>

  </div>
</template>

{{component.main_title}
{{item.button.button_link.title}

完全取决于您的组件模板。对于任何有意义的答案，都要包括这一点。简而言之，

.native

侦听组件的根元素事件。如果根元素有这样的事件，则会对其进行处理，如果组件有同名的自定义事件，

。本机处理程序将不会处理该事件。您是指父元素的模板吗？我将在一分钟内添加它们。谢谢你的评论。不过我还是不完全明白。您谈论的是哪个组件的根元素。你是在说我的按钮组件还是我使用它的组件？我也不使用任何自定义事件，尤其是不使用名称
mouseover
。但我想我还是错过了一些东西……你在订阅一个活动。问题是这是谁的活动？你认为这次活动将由谁举办？一些组件，对吗？这就是我刚才说的，没错。这就是我的动态组件按钮。但我在这两种情况下都使用了相同的组件，我所听到的事件是按钮的事件。所以这就是我想知道的，为什么我在那里看到行为上的不同。。。
<template>
  <div class="Storyboard">

    <BHeading v-if="component.main_title" :level="3" class="Storyboard__heading Storyboard__BHeading">{{ component.main_title }}</BHeading>

    <div v-for="(item, index) in component.four_column_layout" :key="index" class="Storyboard__item--four-columns">

      <BRichtext v-if="item.text" class="Storyboard__richtext Storyboard__BRichtext" :content="item.text" />
      <BBtn
        v-if="item.button.button_checkbox"
        class="TwoColumnModule__BBtn"
        :inverted-text-color="item.button.button_text_color"
        :background-color="item.button.button_color"
        :target="item.button.button_link.target"
        :to="checkLinkIfInternal(item.button.button_link.url) ? prepareNuxtLink(item.button.button_link.url) : item.button.button_link.url"
        :external="checkIfTypeButton()"
        :href="checkLinkIfInternal(item.button.button_link.url) ? false : item.button.button_link.url"
        :hover-color="item.button.button_color_hover"
      >
        {{ item.button.button_link.title }}
      </BBtn>
    </div>

  </div>
</template>