Vue.js嵌套路由下如何为不同子路由组件传递差异化Props

当前出现的多余属性透传，是两个Vue运行机制共同作用的结果：

1. 全量绑定在具名<router-view>上的方法，会自动作为attrs传递给匹配到的子路由组件
2. ChildTwo组件仅声明接收functionOne，剩下两个未被声明接收的方法，在组件未关闭自动属性透传的默认行为下，会直接被挂载到组件的根DOM元素上

方案1：动态匹配子路由，按需绑定router-view的props #

这是改动成本最低的方案，不需要修改现有子组件结构逻辑，直接在Parent组件侧控制传递的内容：

1. 在Parent组件中引入当前路由实例，根据匹配到的子路由名称，动态生成要传给router-view的props对象：

<!-- Parent.vue 的 script setup 部分 -->
<script setup>
import { computed, useRoute } from 'vue'
const route = useRoute()

// 定义三个业务方法
const functionOne = () => {}
const functionTwo = () => {}
const functionThree = () => {}

// 按子路由需求生成对应props
const nestedViewProps = computed(() => {
  switch (route.name) {
    case 'ChildOne':
      return { functionOne, functionTwo, functionThree }
    case 'ChildTwo':
      return { functionOne }
    default:
      return {}
  }
})
</script>

2. 修改Pug模板中的router-view绑定，替换原来全量静态写死的方法绑定：

router-view(
  name="nestedview",
  v-bind="nestedViewProps"
)

不同子路由只会拿到自己需要的方法，未被传递的方法不会进入组件的透传流程，自然不会出现在DOM上。

方案2：使用Provide/Inject跨层传参，彻底移除router-view的冗余绑定 #

如果后续嵌套层级较深、多个子路由都需要复用Parent提供的方法，这种方案耦合度最低：

1. 在Parent组件中将需要复用的方法通过provide统一注入到下层组件树，不需要在router-view上绑定任何方法：

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

const functionOne = () => {}
const functionTwo = () => {}
const functionThree = () => {}

// 统一注入所有需要传递的方法
provide('parentFuncPool', {
  functionOne,
  functionTwo,
  functionThree
})
</script>

<template>
  <!-- router-view 不需要绑定任何props -->
  <router-view name="nestedview" />
</template>

2. 在各个子路由组件中，按需inject自己需要的方法即可：

<!-- ChildOne.vue 按需取三个方法 -->
<script setup>
import { inject } from 'vue'
const { functionOne, functionTwo, functionThree } = inject('parentFuncPool')
</script>

<!-- ChildTwo.vue 仅取自己需要的functionOne -->
<script setup>
import { inject } from 'vue'
const { functionOne } = inject('parentFuncPool')
</script>

这种方式不存在多余的props绑定，从根源上避免了属性透传到DOM的问题。

方案3：子组件侧关闭自动属性透传 #

如果不想改动Parent侧的逻辑，可以在每个子路由组件中通过配置阻断未声明属性的自动渲染：

1. 在ChildTwo组件中显式声明需要接收的props，同时设置inheritAttrs: false关闭自动透传行为：

<!-- ChildTwo.vue -->
<script setup>
defineProps({
  functionOne: {
    type: Function,
    required: true
  }
})
</script>

<script>
export default {
  // 阻止未声明的属性自动挂载到根DOM
  inheritAttrs: false
}
</script>

注：这种方案只是将多余的属性从DOM上隐藏，这些方法依然会存在于组件的$attrs实例上，本质上没有减少无效的传参流程，适合临时快速修复问题的场景。

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