版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83716117
此处的组件切换使用的是Vue中的component组件中的is属性来实现的。该is属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。
示例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
</head>
<body>
<template id="demo1">
<h2>组件1</h2>
</template>
<template id="demo2">
<h2>组件2</h2>
</template>
<div id="app">
<a href="javascript:void(0)" @click="componentName = 'demo1'">组件1</a> |
<a href="javascript:void(0)" @click="componentName = 'demo2'">组件2</a>
<component :is="componentName"></component>
</div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//组件1
Vue.component('demo1',{
template:'#demo1'
});
//组件2
Vue.component('demo2',{
template:'#demo2'
});
//创建Vue对象
new Vue({
el:'#app'
,data:{
componentName:''
}
});
</script>
</body>
</html>
结果
分析
上面该代码实现的功能是，当我点击组件1链接时，其会切换组件1展示内容，当我点击组件2时，其会切换组件2展示内容，以此来实现点击不同的链接，跳转展示不同的组件内容。
在上面的代码中，由于a标签自己默认有一个点击响应事件href此时我们在使用时为了不触发其自身默认的点击响应事件，因而我们会将该事件的返回类型置空，即标记成javascript:void(0)
在a标签中，由于在href和@click属性都是表示此处可填写js代码块，因而在这里我们不仅仅可以填写函数的调用方法，我们还可以直接在此处填写js，比如填写componentName = 'demo2'，其等价于this.componentName = 'demo2';因而我们在此处使用后一种方式也是正确的。
在component中的:is其实全称是v-bind:is，其是一个条件判断，返回的是一个布尔类型的数据。其就是用来判断componentName所指明的控件是否为真，如果是，则进行相应的展示。
通过上述的几个功能，我们以此来实现Vue中控件的切换展示操作。