Vue.js中如何在父模板中访问子组件的props（无需修改子组件）

直接在模板中使用self指代子组件实例是不可行的，Vue模板没有内置这种指向子组件的变量。但可以通过以下两种方式实现你的需求，且无需修改my-radio组件：

方法一：使用模板引用（Refs） #

给my-radio添加ref属性，通过$refs访问子组件实例的value属性，搭配可选链操作符避免初始渲染时的null报错：

<template>
  <my-radio :value="val" ref="radio" :label="ValToLabel[$refs.radio?.value]"></my-radio>
</template>

如果是循环渲染多个单选按钮，$refs.radio会变成数组，需通过索引访问对应实例：

<template>
  <my-radio 
    v-for="(item, index) in radioList" 
    :key="index" 
    :value="item.val" 
    ref="radios" 
    :label="ValToLabel[$refs.radios[index]?.value]"
  ></my-radio>
</template>

方法二：封装计算属性（更推荐） #

将值到标签的映射逻辑封装为计算属性，彻底避免重复书写val，同时保证响应式更新：

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

const val = ref('option1')
const ValToLabel = {
  option1: '选项一',
  option2: '选项二'
}
// 封装计算属性统一处理映射
const radioLabel = computed(() => ValToLabel[val.value])
</script>

<template>
  <my-radio :value="val" :label="radioLabel"></my-radio>
</template>

关于插槽插值的说明 #

如果想通过<my-radio>{{ ... }}</my-radio>的插槽方式显示标签，由于默认插槽的作用域属于父组件，无法直接访问子组件的value属性（除非my-radio组件提供了作用域插槽，但你无法修改组件代码），所以这种写法无法实现。

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