vue.js基础（4）

定义Vue组件

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

组件化和模块化的不同

• 模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
• 组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用

全局组件定义的三种方式

1.使用Vue.extend配合Vue.component
2.直接使用Vue.component方法
3.将模板字符串，定义到script标签中

组件中展示数据和响应事件

1.在组价中，data需要被定义为一个方法
2.在组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问

【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象

使用flag标识符结合v-if和v-else切换组件和使用is属性来切换不同的子组件，并添加切换动画

v-if组件切换

    
    
    
    
    



    

		登录
		注册
		
		
		
	
    

:is属性

    
    
    
    
    



    

		登录
		注册
		
		
		
		
		
		
	
    

动画

    
    
    
    
	
    



    

		登录
		注册
		
		
		
		
			
		
		
		
		
		
	
    

父组件向子组件传值

1.组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据
2.使用v-bind或简化指令，将数据传递到子组件中

子组件向父组件传值

1.原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去
2.父组件将方法的引用传递给子组件，其中getmsg是父组件中methods中定义的方法名称，func是子组件调用床底过来方法时候的方法名称
3.子组件内部通过this.$emit(‘方法名’,要传递的数据)方式，来调用父组件中的方法，同事把数据传递给父组件使用

	
		
		
		
		
		
	

	
		

			
{{datamsgFormSon}}
			
			
		
		
		
	

评论列表案例

使用this.$refs来获取元素和组件

    
    
    
    
    



    

		
		
哈哈哈，今天天气太好了！
	

	
	
    

评论列表

	
		
		
		
		
		
	
	

	
		

			 
			

				

					评论人：{{item.user}}
					
					{{item.content}}