错误代码
用Vue3，组件无需注册，所以就会提示“注册了不不使用”的报错，
于是用了异步注册，甚至直接为了不报错就在下面使用3个组件，有异步加载，但还是实现不了预期效果
<script setup>
import { ref, defineAsyncComponent, computed } from 'vue'
const Son1 = defineAsyncComponent(() => import('./components/BaseSon1.vue'));
const Son2 = defineAsyncComponent(() => import('./components/BaseSon2.vue'));
const Son3 = defineAsyncComponent(() => import('./components/BaseSon3.vue'));
const list = ref([ { id: 1, name:'Son1', active: true },{ id: 2, name:'Son2', active: false },{ id: 3, name:'Son3', active: false },
])
let componentName = ref('Son1')
const getComponentName = computed(() => {return componentName.value;
});
const handleClick = (item,index) => {console.log('item,index',item,index);list.value.forEach((i) => {i.active = false})list.value[index].active = true componentName.value = list.value[index].nameconsole.log('componentName.value',componentName.value);
}
</script>
<template><div class="app"> <component :is="getComponentName"></component> <ul> <li v-for="(item, index) in list" :key="item.id"@click="handleClick(item, index)":class="{active: item.active}">{{ item.name }} </li> </ul> </div> <Son3></Son3> <Son1></Son1> <Son2></Son2> </template><style scoped>
.active{color: red;
}
</style>组件已经有了，但是component宽高为0
就上面这个代码，除了没用2个script剩下的没啥大差别了，就不知道为啥上面的不行，可能是预编译啥的吧，求大佬指点
参看项目代码
所以，就用两个script
需要注册，component还有了宽高
<script>
import Son1 from './components/BaseSon1.vue'
import Son2 from './components/BaseSon2.vue'
import Son3 from './components/BaseSon3.vue'
export default {components: { Son1, Son2, Son3 }
}
</script>
<script setup>
import { ref, computed } from 'vue'const list = ref([ { id: 1, name:'Son1', active: true },{ id: 2, name:'Son2', active: false },{ id: 3, name:'Son3', active: false },
])
let componentName = ref('Son1')
const getComponentName = computed(() => {return componentName.value;
});
const handleClick = (item,index) => {console.log('item,index',item,index);list.value.forEach((i) => {i.active = false})list.value[index].active = true componentName.value = list.value[index].nameconsole.log('componentName.value',componentName.value);
}
</script>
<template><div class="app"> <component :is="getComponentName"></component> <ul> <li v-for="(item, index) in list" :key="item.id"@click="handleClick(item, index)":class="{active: item.active}">{{ item.name }} </li> </ul> </div> </template><style scoped>
.active{color: red;
}
</style>computed属性
就是说，还必须用computed属性，单用ref数据给:is还不行，下面是失败案例
<script>
import Son1 from './components/BaseSon1.vue'
import Son2 from './components/BaseSon2.vue'
import Son3 from './components/BaseSon3.vue'
export default {components: { Son1, Son2, Son3 }
}
</script>
<script setup>
import { ref } from 'vue'const list = ref([ { id: 1, name:'Son1', active: true },{ id: 2, name:'Son2', active: false },{ id: 3, name:'Son3', active: false },
])
let componentName = ref('Son1')
// const getComponentName = computed(() => {
// return componentName.value;
// });
const handleClick = (item,index) => {console.log('item,index',item,index);list.value.forEach((i) => {i.active = false})list.value[index].active = true componentName.value = list.value[index].nameconsole.log('componentName.value',componentName.value);
}
</script>
<template><div class="app"> <component :is="ComponentName"></component> <ul> <li v-for="(item, index) in list" :key="item.id"@click="handleClick(item, index)":class="{active: item.active}">{{ item.name }} </li> </ul> </div> </template><style scoped>
.active{color: red;
}
</style>
原因
在Vue中，使用特定的字符串来动态引入组件是一种常见的方法。这是因为在编译阶段，Vue会解析模板，找到对应字符串的组件并进行渲染。例如，中的字符串"Son2"会被解析为对应的组件并进行渲染。
然而，当你尝试使用一个变量（如componentName）作为动态组件的名称时，并不能直接使用该变量，因为Vue编译器无法在编译阶段确定要渲染的组件。
为了解决这个问题，你可以使用Vue的异步组件和动态组件的结合。在这种情况下，你可以将动态组件的名称作为异步组件的引用，然后通过动态绑定的方式将其传递给动态组件。
你可以修改模板部分的代码如下：
<component :is="getComponentName"></component>
然后，在脚本部分添加一个计算属性getComponentName来返回组件名称，代码如下：
const getComponentName = computed(() => {return componentName.value;
});
这样修改后，当componentName的值发生变化时，动态组件将根据新的组件名称进行更新和渲染。
请注意，为了让动态组件正常工作，确保组件名称正确且与相应组件的导入路径匹配。
