VUE 组件 - 创建和切换

快来打我* 2023-06-27 12:56 10阅读 0赞

### 什么是组件： ###

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可

### 模块化和组件化的区别 ###

**模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一**

**组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用**

### 一、创建组件的三个方式 ###

1.使用vue.extend来创建全局的Vue组件

<body>
    	
    	<my-com1></my-com1>
    </body>
    <script>
    	//使用vue.extend来创建全局的vue组件
    	var com1=Vue.extend({ 
    		template:'<h3>这是使用vue.extend 创建的组件</h3>' //通过template 属性制定了组件要展示的html结构
    })
         //使用vue.component('组件的名称',创建出来的组件模板名称)
         //注意：组件在注册的时候可以用驼峰，但是在body中使用的时候，不能使用驼峰，需要吧大小写用 - 拆开
         Vue.component('myCom1',com1) 
         //创建 vue实例 得到 ViewModel
        var vm = new Vue({ 
          el: '#app',
          data: { },
          methods: { }
        });
    <script>

2.第二种创建组件的方式：

3.定义私有的内部组件：

**组件可以有自己的data数据，组件的data和vue实例的data不一样，实例中的data可以作为一个对象，但是组件中的data必须是一个方法，而且还必须要有返回值**  
解释例子：

Vue.component('mycom1',{ 
    	template:'<h1>这是全局组件</h1>',
    	data:function(){ 
    		return{ 
    		a1:'122',
    		a2:'344',
    			}
    		}
    })

### 二、组件的切换 ###

**上面创建了组件之后，我们经常会用于组件之间的动态切换**

两个组件之间的切换：

![例子][20200107093630458.png]  
**看下面的例子**

<body>
    	<div id="app">
    		<a href="" @click.prevent="flag=true">登录</a>
    		<a href="" @click.prevent="flag=false">注册</a>
    
    		<login v-if="flag></login>  //当flag为true时 login显示否则隐藏
    		<register v-else=“flag”></register>
    		
    		script>
        		Vue.component('login', { 
          		template: '<h3>登录组件</h3>'
        })
        		Vue.component('register', { 
          		template: '<h3>注册组件2</h3>'
        })
        		var vm = new Vue({ 
          		el: '#app',
          		data: { 
            	flag: false
          },
          		methods: { }
        });
      </script>
    
    	</div>
    </body>

结果：  
![在这里插入图片描述][20200107095223283.png]![在这里插入图片描述][20200107095212256.png]  
上面的这个例子是两个组件之间的互相切换，但是如果出现了多个组件，那如何切换？

多个组件的切换：  
关键点： vue提供了 component 来展示对应名称的组件：

例子：

<div>
    //当点击注册的时候 变量comName的值为login
    	<a href="" @click.prevent="comName='login'">登录</a>
    	//当点击注册的时候 变量comName的值为register
    	<a href="" @click.prevent="comName="register'">注册</a>
    	
        
    	<component is="comName></component>
    </div>
    
    <script>
        //组件名称 是 字符串
        Vue.component('login', { 
          template: '<h3>登录组件</h3>'
        })
    
        Vue.component('register', { 
          template: '<h3>注册组件</h3>'
        })
        var vm = new Vue({ 
          el: '#app',
          data: { 
            comName: ''
          },
          methods: { }
        });
      </script>

**这样我们就可以通过 component 来切换多个组件**

[20200107093630458.png]: https://img-blog.csdnimg.cn/20200107093630458.png
[20200107095223283.png]: https://img-blog.csdnimg.cn/20200107095223283.png
[20200107095212256.png]: https://img-blog.csdnimg.cn/20200107095212256.png