微信扫一扫打赏支持

VUE参考---组件切换方式

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>

 

 

 
posted @ 2020-04-22 15:35  范仁义  阅读(336)  评论(0)    收藏  举报