步骤一 引入组件
举例<script>import ServiceDSata from '../components/ServiceDSata.vue'import ProvincialData from '../components/ProvincialData.vue'import EnterpriseData from '../components/EnterpriseData.vue'export default {data() {return {componentId:'EnterpriseData'}},components: {EnterpriseData,ProvincialData,ServiceDSata,}}</script>
步骤二 动态组件标签
<component :is="componentId"></component> // :is='默认的组件名'
步骤三 点击事件
//点击事件 绑定的变量等于需要切换的组件名 即可<ul><li class="liss" @click="componentId='EnterpriseData'">企业数据</li><li class="liss" @click="componentId='ServiceDSata'">服务数据</li><li class="liss" @click="componentId='ProvincialData'">省份数据</li></ul>
实例:仅供参考
<template><div><div class="bgiMain"><!-- 上 --><div class="Maintop"><ul class="uiw"><li class="liss" @click="componentId='EnterpriseData'">企业数据</li><li class="liss" @click="componentId='ServiceDSata'">服务数据</li><li class="liss" @click="componentId='ProvincialData'">省份数据</li></ul></div></div><!-- 主题内容 --><component :is="componentId"></component></div></template><script>import ServiceDSata from '../components/ServiceDSata.vue'import ProvincialData from '../components/ProvincialData.vue'import EnterpriseData from '../components/EnterpriseData.vue'export default {data() {return {componentId:'EnterpriseData'}},components: {EnterpriseData,ProvincialData,ServiceDSata,}}</script>
