中国即将全面疫情解封_百度如何创建网站_网络网站_中国新闻最新消息今天

代码

html

  <component :is="data.componentsshow[data.showc]" 
:msg="'动态组件传值可以这样吗？'" :msgtwo="'动态组件传值可以这样！'" 
@senddata="senddata"></component>

data.componentsshow[data.showc]  等于  data.componentsshow.oneChapter

js

const data = reactive({componentsshow: {},showc: ''
})//所有组件信息
//studentChapter 文件夹下的所有组件
//截取方法
const getCaption = (obj, str, z: boolean) => {let index = obj.lastIndexOf(str);if (z) index += str.length// z为true则截取/之后的内容，反之obj = z ? obj.substring(index, obj.length) : obj.substring(0, index);return obj;
};
//循环打印组件
//截取之前
// ./studentChapter/oneChapter.vue 组件----
//截取之后
//  oneChapter.vue
const getComponentsList = () => {const select_modules = import.meta.glob("../components/studentChapter/*.vue");for (const key in select_modules) {let starter = getCaption(key, "./studentChapter/", true);let name = getCaption(starter, ".vue", false);select_modules[key]().then(res => {data.componentsshow[name] = shallowRef(res.default);});}
}const sendChapter = (e) => {//我要使用那个组件 //组件名称就是，组件的文件名字console.log(e, '组件名称');getComponentsList()data.showc = e;
}

关于动态组件传值和原本v3传值是一样的。