使用vue中的component 实现多个组件来回切换。
<template>
<div>
<div id="dynamic-component-demo" class="demo">
<!-- 为各个按钮设置事件绑定,点击时修改 name 为对应的值(注意 name 的值要用引号包裹起来) -->
<el-button @click="name='myhome'">首页</el-button>
<el-button @click="name='news'">新闻</el-button>
<el-button @click="name='classIfy'">分类</el-button>
<el-button @click="name='call'">联系</el-button>
<!-- 若是数据需要动态渲染,组件切换之后会导致之前获得的数据丢失,这个时候,若我们想要在组件切换过程中保持这些组件的状态,
以避免重复渲染导致性能问题,则可以在动态组件上使用keep-alive来缓存组件中的数据,代码如下所示: -->
<keep-alive>
<!-- :is 已注册组件的名字,或一个组件的选项对象-->
<!-- :is 其值是将要显示的组件名称-->
<component :is="name" :data="propsData" :dataA="propsDataA"
:dataB="propsDataB" :dataC="propsDataC"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import call from './com/call.vue'
import classIfy from './com/classIfy.vue'
import myhome from './com/myhome.vue'
import news from './com/news.vue'
export default {
name: 'activeCom',
components: {
call, classIfy, myhome, news
},
data() {
return {
// 定义起初要显示的组件,要用双引号引起来
name: 'myhome',
propsData: '这是首页',
propsDataA: '这是新闻',
propsDataB: '这是分类',
propsDataC: '这是联系',
}
},
}
</script>
需要引入的组件,例如:myhome.vue
<template>
<div>首页--{{ data }}</div>
</template>
<script>
export default{
name:'myhome',
//这里接受传过来的值
props:{
data:{
type:String
}
},
data(){
return{
}
}
}
</script>