2

我刚刚在运行 vue 应用时遇到了一些我不理解的事情。我有一个按钮，它包含在多个父组件中。我刚刚为 and 添加了一些事件监听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。

我现在不仅不明白到底发生了什么，而且我的按钮组件在这两种情况之一中都会失败，因为我无法以相同的方式访问 style 属性。

我如何使用该组件的唯一区别是，在一种情况下，按钮出现在v-for-loop 中。其他一切都完全相同。这会导致不同的行为吗？

感谢您提供有关这方面的一些背景信息。干杯

编辑

这是我的父组件模板：

这是我必须在@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>
4

0 回答 0