vue如何实现动态组件展示不同数据
时间: 2023-11-08 20:06:02 浏览: 34
可以使用Vue的动态组件和props来实现动态展示不同数据。
1. 首先定义多个组件,每个组件对应不同的数据展示方式。
2. 在父组件中使用<component>标签,通过v-bind:is属性绑定要展示的子组件的名称,从而实现动态组件展示。
3. 在父组件中定义一个data属性,用来存储要展示的数据,然后通过props将数据传递给子组件。
示例代码如下:
```
<template>
<div>
<button @click="showComponent('ComponentA')">展示组件A</button>
<button @click="showComponent('ComponentB')">展示组件B</button>
<component :is="currentComponent" :data="currentData"></component>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentComponent: '', // 当前展示的组件名称
currentData: {} // 当前展示的数据
}
},
methods: {
showComponent(componentName) {
this.currentComponent = componentName;
this.currentData = {
// 根据需要传递不同的数据
}
}
}
}
</script>
```