你可以使用
动态组件和props来
实现根据参数加载不同的
组件。具体
实现步骤如下：
1. 定义
组件props来接收参数，例如：
```
typescript
interface
ComponentProps {
componentType: string;
}
```
2. 在父
组件模板中使用
动态组件，并根据传入的参数设置不同的
组件。例如：
```
vue
<template>
<
component :is="current
Component" :
componentType="
componentType" />
</template>
<script>
import
ComponentA from './
ComponentA.
vue';
import
ComponentB from './
ComponentB.
vue';
export default {
components: {
ComponentA,
ComponentB,
},
props: {
componentType: String,
},
computed: {
current
Component() {
switch (this.
componentType) {
case 'typeA':
return '
ComponentA';
case 'typeB':
return '
ComponentB';
default:
return null;
}
},
},
};
</script>
```
在上面的代码中，我们通过computed属性根据传入的
componentType参数来返回对应的
组件。
component标签的is属性用于设置当前渲染的
组件。
3. 在子
组件中使用props接收参数，例如：
```
vue
<template>
<div>{{
componentType }}
component</div>
</template>
<script>
import { define
Component, PropType } from '
vue';
interface
ComponentProps {
componentType: string;
}
export default define
Component({
props: {
componentType: {
type: String as PropType<
ComponentProps['
componentType']>,
required: true,
},
},
});
</script>
```
在上面的代码中，我们使用define
Component函数定义了子
组件，并通过props接收了
componentType参数。
最后，你可以在父
组件模板中使用这个
动态组件，并传入不同的
componentType参数，例如：
```
vue
<template>
<div>
<button @click="showTypeA">Show
Component A</button>
<button @click="showTypeB">Show
Component B</button>
<
component-loader :
componentType="current
ComponentType" />
</div>
</template>
<script>
import
ComponentLoader from './
ComponentLoader.
vue';
import { define
Component, reactive } from '
vue';
interface AppData {
current
ComponentType: string;
}
export default define
Component({
components: {
ComponentLoader,
},
setup() {
const data = reactive<AppData>({
current
ComponentType: '',
});
function showTypeA() {
data.current
ComponentType = 'typeA';
}
function showTypeB() {
data.current
ComponentType = 'typeB';
}
return {
...data,
showTypeA,
showTypeB,
};
},
});
</script>
```
在上面的代码中，我们定义了一个父
组件，并在模板中使用了两个按钮来
切换显示不同的
组件。通过修改current
ComponentType属性来
切换显示不同的
组件。
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
