方法一、 使用v-if命令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> </div> <script> Vue.component(‘login‘, { template: ‘<h3>登录组件</h3>‘ }) Vue.component(‘register‘, { template: ‘<h3>注册组件</h3>‘ }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app‘, data: { flag: false }, methods: {} }); </script> </body> </html>
方法二、使用component占位符
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <a href="" @click.prevent="whos=‘mycom1‘">mycom1组件</a> <a href="" @click.prevent="whos=‘mycom2‘">mycom2组件</a> <!-- vue自带标签，来展示对应名称的组件 component 是个占位符 :is 属性用来指定要展示的组件名称 --> <component :is="whos"></component> </div> <template id="temp1"> <h3>mycom1主件111111111111111</h3> </template> <template id="temp2"> <h3>mycom2主件2222222222222222</h3> </template> <script type="text/javascript"> // 主件可以有data数据，但是data必须是一个方法，方法内部还得返回一个对象 Vue.component("mycom1",{ template:‘#temp1‘, }) Vue.component("mycom2",{ template:‘#temp2‘, }) var vm=new Vue({ el:‘#app‘, data:{ whos:"mycom1", }, methods:{ } }) </script> </body> </html>
原文：https://www.cnblogs.com/shangrao/p/13067789.html