Vue模板语法（下）

事件处理器

	
		
		
		
		
		
	
	
		
		

			
冒泡事件
			

				

					

						

					
				
			
			
点击夸你
			提交
	
	

冒泡事件

 

 阻止事件冒泡

 

 事件只能单击一次

什么是事件冒泡?

冒泡事件是指在Web开发中的事件传播过程中，事件从DOM树的最底层元素（通常是最具体的元素）向上冒泡到DOM树的根节点的过程。这种事件传播模型允许开发者在更高层次的元素上监听和处理事件，而不需要在每个具体的元素上都添加事件处理程序。

冒泡事件的传播过程可以简要描述如下：

1. 事件首先从触发它的元素开始，然后向上冒泡到DOM树的根节点。
2. 在这个过程中，每个祖先元素都有机会捕获并处理事件，如果它们注册了相应的事件处理程序。
3. 如果事件处理程序返回true，事件将继续冒泡，直到到达根节点。
4. 如果事件处理程序返回false或没有返回值，事件将停止冒泡，不会继续向上传播。

冒泡事件允许开发者在父元素上注册事件处理程序，以便捕获子元素触发的事件，从而提高了事件处理的效率和可维护性。

 

 表单的综合案例

  
  
  


  

    姓名：

    密码：

    性别：
      {{s.name}}
    

	
    籍贯：
      {{a.name}}
    

	
    爱好：
      {{h.name}}
    

	
	
    简介：

    是否同意：

    提交
  
  

 效果图：

 组件通信

自定义事件

   监听事件：$on(eventName)

   触发事件：$emit(eventName)

   注1：Vue自定义事件是为组件间通信设计  

        vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

        父Vue实例->Vue实例，通过prop传递数据

        子Vue实例->父Vue实例，通过事件传递数据

   注2：事件名

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

        建议使用“短横线分隔命名”，例如：three-click

 自定义组件

	
		
		
		
	
	
		

			
自定义组件
			liao
			
			
		
	

效果图：

 组件通信父传子

	
		
		
		
	
	
		

			
自定义组件
			liao

			
			
			
组件通信——父传子
			
			
			
			
组件通信——父传子（纸）
			
		
			
		
	

 效果图：

 组件通信子传父

	
		
		
		
	
	
		

			
组件通信——子传父
			
		
			
		
	

 

 效果图：