vue项目中动态组件场景的使用

项目场景：

项目中会出现点击不同div会弹出不同的弹框，或者切换不同的页面场景

---

问题描述

如果是弹出不同的弹框，我们通常会写几个对应得不同弹框组件，然后全部注册在父组件里面，点击不同得div后设置不同的dialogVisible。

//HTML部分：
<template>
<div>
  <div
    v-for="item in list"
		  :key="el.type"
	@click="changeType(el.type)">

    <span>{{item.name}}</span>

  </div>

  <ADialog ref="ADialogRef"/>
  <BDialog ref="BDialogRef"/>
  <CDialog ref="CDialogRef"/>
  <DDialog ref="DDialogRef"/>
</div>
</template>

//Script部分：
<script>
    import Aialog from './ADialog'
    import BDialog from './BDialog'
    import CDialog from './CDialog'
    import DDialog from './DDialog'
export default {
	name: 'Father',
	components: {
		ADialog,
		BDialog,
		CDialog,
		DDialog
	},
   data:{
    clickType:0
    list:[{type:0,name:'汉克博'},
          {type:1,name:'窗帘'},
          {type:2,,name:'欧式'}, 
          {type:3,name:'定制'}]
   },
   methods:{
    changeType(type){
      this.clickType = type;
      const obj = {
          '0':ADialog,
          '1':Bdialog,
          '2':Cdialog,
          '3':DDialog,
         };
      this.$refs.obj[type]Ref.dialogVisible = true
  },
  
}

</script>

---

动态组件方案：

//HTML部分：
<template>
<div>
  <div
    v-for="item in list"
		  :key="el.type"
	@click="changeType(el.type)">

    <span>{{item.name}}</span>

  </div>

  <component is="isDialog"/>
</div>
</template>

//Script部分：
<script>
    import Aialog from './ADialog'
    import BDialog from './BDialog'
    import CDialog from './CDialog'
    import DDialog from './DDialog'
export default {
	name: 'Father',
	components: {
		ADialog,
		BDialog,
		CDialog,
		DDialog
	},
   data:{
    clickType:0
    list:[{type:0,name:'汉克博'},
          {type:1,name:'窗帘'},
          {type:2,,name:'欧式'}, 
          {type:3,name:'定制'}],
   },
   computed:{
     isDialog(){
       const obj = {
          '0':ADialog,
          '1':Bdialog,
          '2':Cdialog,
          '3':DDialog,
         };
       return obj[this.clickType]
    }
  
   },
   methods:{
    changeType(type){
      this.clickType = type;
  },
  
  
}

</script>