Question

我正在尝试使用Vue.js创建一个易于使用的鼠标视差组件。

我有两个组件，视差容器和视差元素。这个想法是，当鼠标在视差容器内移动时，视差效果开始。然后它将鼠标位置传递给视差元素 =＆gt;使用道具。一切正常。但我的问题是，当我想使用它时，我得到一个像这样的代码

<parallax-container>
  <template slot-scope="props">
    <parallaxElement
    class="text-container"
    :mousePX="props.mousePositionX"
    :mousePY="props.mousePositionY"
    :isHover="props.isHover"
    :parallaxStrength="-10">
      <h1>MouseParallax</h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, omnis atque. Dolore rerum, doloremque nulla animi neque repellat ad voluptatem cumque cum laudantium aut illo illum placeat nihil inventore ipsa.</p>
    </parallaxElement>

    <parallaxElement
    class="background-image"
    :mousePX="props.mousePositionX"
    :mousePY="props.mousePositionY"
    :isHover="props.isHover"
    :parallaxStrength="-30">
    </parallaxElement>
  </template>
</parallax-container>

视差container.vue

<template>
 <div class="horizontal-card" @mousemove="getMousePosition">
     <slot :mousePositionX="mouseX" :mousePositionY="mouseY" :isHover="hovering"></slot>
    </div>
</template>

<script>
import parallaxElement from "./parallax-element.vue"
import _ from 'lodash'

export default {
  data() {
    return {
      mouseX: 0,
      mouseY: 0,
      hovering: false
    }
  },
  methods: {
     getMousePosition: _.throttle(function(e) {
      this.hovering = true
      this.mouseX = e.pageX
      this.mouseY = e.pageY
    }, 100)
  },
  components: {
    parallaxElement
  }
}
</script>

现在我的问题是，对于每个parallaxElement，我需要传递：mousePX，：mousePY和：isHover，感觉非常无用，因为它的值完全相同。我怎样才能避免通过道具传递鼠标位置和ishover？我正在考虑，例如，在视差元素上听@mousemove事件，让它直接将鼠标位置数据传递给它的兄弟，而不通过父节点。看似没有办法做到这一点。你有更聪明的建议吗？

提前致谢。

Vue.js - 将数据从父级传递给子级而不使用道具

0 个答案: