Vue.js模板语法[下](事件处理，表单综合案例，自定义组件)---详细讲解

一，事件处理

1. `.stop`：阻止事件冒泡。使用该修饰符可以阻止事件向父元素传播

2. `.prevent`：阻止默认事件。使用该修饰符可以阻止事件的默认行为。

3. `.capture`：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的，使用该修饰符可以改为在捕获阶段处理。

4. `.self`：只在事件触发的元素自身上触发事件处理器。如果事件是由子元素触发的，使用`.self`修饰符可以阻止事件处理器执行。

5. `.once`：只触发一次事件处理器。使用该修饰符可以确保事件处理器只执行一次。

6. `.passive`：提升滚动性能。如果事件处理器中没有调用preventDefault()阻止默认事件，可以使用`.passive`修饰符来告诉浏览器该事件处理器不会阻止默认事件，从而提升滚动的性能。
 

事件修饰符

  Vue通过由点(.)表示的指令后缀来调用修饰符，

 ① .stop

当我们嵌套多个div并设置点击事件的时候，会弹出多个提示语句，使用.stop即可

没有使用.stop的案例：

会发现，越在里面嵌套的div，越会弹出多个提示语句，再使用.stop即可

如：

加上之后，再试试！

② .once

在我们日常生活中，在点击提交按钮上传相关的资料或app点击查询的时候。有些时候觉得是卡了，然后就一直点击相关的按钮，其实一直点的时候会将你想提交的资料数据等等，重复将数据提交到后台。

如：

.once就是将重复的数据只能提交一遍，然后在事件上点击.once，再试试

点我

二，表单综合案例

表达综合案例作用：

     在Vue中，整合所有语法是指将Vue的各种语法特性结合起来使用，以实现更复杂、更灵活的功能。通过整合各种语法特性，可以更好地利用Vue的强大功能，提高开发效率和代码质量

案例代码：

	
		
		
		 
		
	
	
	
	
		

			姓名：

		 	密码：

		    性别
			    {{s.name}}
		        
 
	     	籍贯：
				{{a.name}}
		     	

		    爱好：
				 {{h.name}}
			    

		    个人简介：

			
			同意：

			  提交
			
			
			
		
	

三，自定义组件

       在前端开发中，自定义组件通常由 HTML、CSS 和 JavaScript 代码组成，用于实现特定的用户界面元素和行为。例如，一个自定义的按钮组件可能具有特定的样式、点击效果和交互行为。通过创建自定义组件，开发者可以减少重复的代码编写，提高代码的可复用性和维护性。

总之，自定义组件是开发者按照自己的需求和特定场景创建的、具有特定功能的组件，用于增强软件的功能和可定制性

常见的组件：

父子组件通信：父组件可以通过属性绑定向子组件传递数据，子组件可以通过事件来向父组件发送消息。父组件通过属性绑定将数据传递给子组件，子组件可以通过props属性接收并使用这些数据。子组件可以通过$emit方法触发事件，并传递参数给父组件。这种通信方式符合单向数据流的原则，父组件通过属性传递数据给子组件，而子组件通过事件将消息传递给父组件。
创建一个自定义组件button

	
		
		
		 
	
	
	
	
		

       
自定义组件的使用
       xx
		
		
	

组件父传子

	
		
		
		 
	
	
	
	
		

       
自定义组件的使用
       
	      
组件通信---父传子
	   
	   
组件通信---父传子2
	   
		
		
	

组件子传父

组件通信中子传父是Vue中常用的组件通信方式之一，它可以实现子组件向父组件传递数据、实现组件的解耦和复用、实现数据的传递和共享等功能。通过合理使用子传父，可以更好地组织和管理Vue项目的代码，提高开发效率和代码质量

	
		
		
		 
	
	
	
	
		

       
自定义组件的使用
	      
组件通信---子传父