Vue3中如何让子组件使用父组件接收的外部Props？

这里有两种常用方案可以实现需求：

方案一：使用作用域插槽传递属性 #

这是最直观的方式，父组件把需要传递的属性绑定到插槽上，再在使用子组件时将属性传递给它。

修改 Parent.vue #

将父组件的属性通过作用域插槽暴露出去：

<script setup>
defineProps({
  col: { type: Number, default: 3 },
  labelWidth: { type: String, default: 'default' },
})
</script>

<template>
<div>
  <!-- 绑定需要传递的属性到slot -->
  <slot :labelWidth="labelWidth" :col="col"></slot>
</div>
</template>

修改 App.vue #

接收父组件插槽传递的属性，再传给子组件：

<script setup>
import Parent from 'Parent.vue'
import Child from 'Child.vue'
</script>

<template>
<Parent label-width="large">
  <!-- 解构插槽作用域里的属性 -->
  <template #default="{ labelWidth }">
    <Child :label-width="labelWidth"></Child>
    <Child :label-width="labelWidth"></Child>
  </template>
</Parent>
</template>

修改 Child.vue #

定义props接收传递过来的属性：

<script setup>
defineProps({
  labelWidth: { type: String, default: 'default' },
})
</script>

<template>
  <div>
    <!-- 直接使用labelWidth属性，可根据实际需求做样式处理 -->
    <label :style="{ width: labelWidth === 'default' ? '120px' : labelWidth === 'large' ? '200px' : 'auto' }">Hello</label>
    <slot></slot>
  </div>
</template>

方案二：使用 provide/inject 跨层级传递 #

如果子组件嵌套层级较深，逐层传递属性太繁琐，可以用Vue的provide和inject实现跨组件传递。

修改 Parent.vue #

在父组件中提供需要共享的属性：

<script setup>
import { provide } from 'vue'
const props = defineProps({
  col: { type: Number, default: 3 },
  labelWidth: { type: String, default: 'default' },
})

// 向后代组件提供属性，第一个参数是注入的key，第二个是属性值
provide('formLabelWidth', props.labelWidth)
provide('formCol', props.col)
</script>

<template>
<div>
  <slot></slot>
</div>
</template>

修改 Child.vue #

在子组件中注入父组件提供的属性：

<script setup>
import { inject } from 'vue'
// 注入属性，第二个参数是默认值
const labelWidth = inject('formLabelWidth', 'default')
</script>

<template>
  <div>
    <label :style="{ width: labelWidth === 'default' ? '120px' : labelWidth === 'large' ? '200px' : 'auto' }">Hello</label>
    <slot></slot>
  </div>
</template>

这种方式下，App.vue无需修改，保持原来的写法即可。

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