javascript - イベントの Vue .native が必要な場合とそうでない場合があります (同じコンポーネント内で)

Question

実行中の 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>

両方のケースをカバーするために@mouseoverandを追加したことがわかります。@mouseover.native

ここでの違いの原因は何かに本当に興味があります。正直なところ、vue docs の部分がよくわかりません。

また、DOM 要素のスタイル プロパティにアクセスする方法に違いがあることにも気付きました。私はそれに参照を与えました:ref="button"そして、私は通常、次の方法でアクセスします:

this.$refs.button.style.backgroundColor ただし.native、メソッドを呼び出す必要がある場合は$el、stlye プロパティにもアクセスする必要がありますthis.$refs.button.$el.style.backgroundColor。

何が起こっているのか正確に理解できないだけでなく、同じ方法でスタイル プロパティにアクセスできないため、ボタン コンポーネントが 2 つのケースのいずれかで失敗するという問題もあります。

コンポーネントの使用方法の唯一の違いは、ボタンがループ内に表示される場合があることv-forです。他のすべてはまったく同じです。これが異なる動作の原因ですか？

それについての背景情報をありがとう。乾杯

---

編集

親コンポーネントのテンプレートは次のとおりです。

これは、@mouseoutネイティブなしで使用する必要がある場所です。

<template>
  <div class="TwoColumnModule">
    <div class="TwoColumnModule__text">
      <BRichtext v-if="component.text" class="TwoColumnModule__richtext TwoColumnModule__BRichtext" :content="component.text" />
      <BBtn
        v-if="component.button_checkbox"
        class="TwoColumnModule__BBtn"
        :inverted-text-color="component.button_text_color"
        :background-color="component.button_color"
        :target="component.button_link.target"
        :to="checkLinkIfInternal(component.button_link.url) ? prepareNuxtLink(component.button_link.url) : component.button_link.url"
        :external="typeButton"
        :href="checkLinkIfInternal(component.button_link.url) ? false : component.button_link.url"
        :hover-color="component.button_color_hover"
      >
        {{ component.button_link.title }}
      </BBtn>
    </div>


    <!-- eslint-disable vue/no-v-html -->
    <div
      v-else
      class="TwoColumnModule__video"
      v-html="component.vimeo_video"
    />
  </div>
</template>

そして、これは私が必要.nativeとし、経由で参照にアクセスする 必要がある場所ですthis.$refs.button.$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>