Vue 根据父组件的不同动态显示子组件

一、问题描述

两个同级组件公用一个子组件，需要根据不同的组件，动态显示子组件的内容，比如A需要这么多的Radio,但是B不需要

二、解决思路

父组件向子组件传值，子组件根据传入的内容进行判断

三、代码

// 父组件引入子组件 通过自定义名称传入父组件的值
<statusChange :isShowRadio="showStatusRadio" ></statusChange>

<script setup>
import { ref } from "vue"  
import statusChange from '@/components/A_组件传值/A组件.vue'    // 引入子组件

// 父组件的值
const showStatusRadio = ref(false)
</script>

<el-radio-group v-model="form.statusChange">
      <el-radio label="0" size="large"></el-radio>
      <el-radio v-if="isShowRadio" label="1" size="large">1</el-radio>
      <el-radio v-if="isShowRadio" label="2" size="large">2</el-radio>
      <el-radio v-if="isShowRadio" label="3" size="large">3</el-radio>
      <el-radio v-if="isShowRadio" label="-1" size="large">4</el-radio>
</el-radio-group>

<script>
import { ref,toRefs} from "vue" 

export default defineComponent({
    props:{
        isShowRadio:{type:Boolean,default:true}
    }})
</script>

 四、总结

其实非常的简单，但是我对这块内容不太熟悉，简单记录一下，方便自己以后查看