VUE参考---组件切换方式
一、总结
一句话总结：
可以用flag标志来标记组价的显示和隐藏，比如点击登录，flag为true，登录组件显示，点击注册，flag按钮为false，注册按钮显示
用component的is占位符，is 属性可以用来指定要展示的组件的名称：<component :is="comName"></component>，点击的时候切换comName即可
<div id="app"> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a> <!-- Vue提供了 component ,来展示对应名称的组件 --> <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --> <component :is="comName"></component> <!-- 总结:当前学习了几个 Vue 提供的标签了??? --> <!-- component, template, transition, transitionGroup --> </div>
二、组件切换方式
博客对应课程的视频位置：
1、flag标志组件切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <a href="" @click.prevent="flag=true">登录</a> 15 <a href="" @click.prevent="flag=false">注册</a> 16 17 <login v-if="flag"></login> 18 <register v-else="flag"></register> 19 20 </div> 21 22 <script> 23 Vue.component('login', { 24 template: '<h3>登录组件</h3>' 25 }) 26 27 Vue.component('register', { 28 template: '<h3>注册组件</h3>' 29 }) 30 31 // 创建 Vue 实例，得到 ViewModel 32 var vm = new Vue({ 33 el: '#app', 34 data: { 35 flag: false 36 }, 37 methods: {} 38 }); 39 </script> 40 </body> 41 42 </html>
2、component的is属性组件切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/vue-2.4.0.js"></script> 10 </head> 11 12 <body> 13 <div id="app"> 14 <a href="" @click.prevent="comName='login'">登录</a> 15 <a href="" @click.prevent="comName='register'">注册</a> 16 17 <!-- Vue提供了 component ,来展示对应名称的组件 --> 18 <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --> 19 <component :is="comName"></component> 20 21 <!-- 总结:当前学习了几个 Vue 提供的标签了??? --> 22 <!-- component, template, transition, transitionGroup --> 23 24 </div> 25 26 <script> 27 // 组件名称是 字符串 28 Vue.component('login', { 29 template: '<h3>登录组件</h3>' 30 }) 31 32 Vue.component('register', { 33 template: '<h3>注册组件</h3>' 34 }) 35 36 // 创建 Vue 实例，得到 ViewModel 37 var vm = new Vue({ 38 el: '#app', 39 data: { 40 comName: 'login' // 当前 component 中的 :is 绑定的组件的名称 41 }, 42 methods: {} 43 }); 44 </script> 45 </body> 46 47 </html>