vue.js基础(4)

定义Vue组件

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

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

全局组件定义的三种方式

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




	
		
		
		
		创建组件
		
	

	
		

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

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





    
    
    
    组件中的data和methods
    



    

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




	
		
		
		
		计数器
		
	

	
		
		



vue.js基础(4)_第1张图片

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

v-if组件切换





    
    
    
    组件切换
    



    
    



:is属性





    
    
    
    组件切换方式2
    



    
    



动画





    
    
    
    组件切换方式2
	
    



    
    



vue.js基础(4)_第2张图片

父组件向子组件传值

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





    
    
    
    父组件向子组件传值
    



    

子组件向父组件传值

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




	
		
		
		
		父组件向子组件传方法
		
	

	
		

{{datamsgFormSon}}

评论列表案例

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





    
    
    
    ref获取DOM元素和组件
    



    

哈哈哈,今天天气太好了!


评论列表




	
		
		
		
		评论列表
		
	
	

	
		
  • 评论人:{{item.user}} {{item.content}}

vue.js基础(4)_第3张图片
vue.js基础(4)_第4张图片

你可能感兴趣的:(vue,vue)