Vue.js：无需Props实现父子组件传值（鼠标视差组件场景）

嘿，我完全懂你的痛点——每次用组件都要写slot-scope那套重复代码确实繁琐，尤其是这种需要频繁复用的视差组件。咱们可以用Vue的provide/inject特性来解决这个问题，让父子组件间的数据传递完全“隐形”，大幅简化使用流程。

具体实现步骤 #

1. 改造parallax-container组件：提供鼠标位置数据 #

在容器组件里，我们用provide把鼠标位置的响应式数据传递给所有子组件（包括parallax-element）。注意要把数据放在响应式对象里，确保子组件能实时拿到更新：

<template>
  <div class="parallax-container" @mousemove="handleMouseMove">
    <slot></slot> <!-- 这里不用再传slot-scope了！ -->
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'

const mousePosition = ref({ x: 0, y: 0 })

const handleMouseMove = (e) => {
  const rect = e.currentTarget.getBoundingClientRect()
  // 计算相对容器的鼠标位置（0-1范围，方便子组件计算视差偏移）
  mousePosition.value = {
    x: (e.clientX - rect.left) / rect.width,
    y: (e.clientY - rect.top) / rect.height
  }
}

// 提供响应式的鼠标位置数据
provide('parallaxMousePosition', mousePosition)
</script>

2. 改造parallax-element组件：注入并使用数据 #

在子组件里，直接用inject拿到父组件提供的鼠标位置，不用再声明props：

<template>
  <div 
    class="parallax-element"
    :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
  >
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, inject, computed } from 'vue'

// 注入父组件提供的鼠标位置
const mousePosition = inject('parallaxMousePosition')

// 可配置的视差强度（可以改成props让用户自定义，这里默认值示例）
const parallaxIntensity = ref(20)

// 计算偏移量
const offsetX = computed(() => (mousePosition.value.x - 0.5) * parallaxIntensity.value)
const offsetY = computed(() => (mousePosition.value.y - 0.5) * parallaxIntensity.value)
</script>

3. 优化后的使用方式 #

现在你只用像普通嵌套组件一样写代码，完全不用管props传递了：

<template>
  <parallax-container>
    <parallax-element class="text-container">
      <h1>我的视差标题</h1>
    </parallax-element>
    <parallax-element class="image-container" :parallax-intensity="30">
      <img src="your-image.jpg" alt="视差图片">
    </parallax-element>
  </parallax-container>
</template>

额外小贴士 #

• 如果你需要支持多个parallax-container嵌套的场景，可以给provide的key加个唯一标识（比如组件实例的uid），避免数据冲突。
• 可以给parallax-element的parallax-intensity加默认值，让组件更易用。
• 如果是Vue 2项目，写法略有不同，但核心思路一样：在父组件的provide选项里返回数据，子组件用inject选项接收。

这样改造后，组件的使用体验就清爽多了，完全不用再写繁琐的slot-scope代码！

内容的提问来源于stack exchange，提问作者Aminerman