Vue - 事件处理器 - 自定义组件 - 综合案例

目录

一、事件处理器

        1.1 冒泡事件

        1.2 控制发送一次

二、自定义组件

        2.1 定义组件

        2.2 组件的通信-父传子

        2.3 子传父

                代码实现思路顺序：

三、表单综合案例

        3.1 案例源码

        3.2 运行测试

---

一、事件处理器

        1.1 冒泡事件

        我们首先来定义一个冒泡事件，为了效果明显，还准备一些样式，方便理解。

        这里就直接放上写好的冒泡事件代码了。

        冒泡事件：

    
《冒泡排序》
    

    

    

    

        我们测试一下：

看着似乎没有任何问题，但是我们点击确定：

结果我们发现它不止弹出了点击的那个颜色，同时还弹出了它的所有父级div颜色；

这样肯定是不行的，所以我们需要来阻止它的连续冒泡行为；

只要这样添加上.stop就好啦~

《阻止冒泡》

    

        

            

            
        
    

这里就不放结果截图了，反正长的都一样嘿嘿... 

        1.2 控制发送一次

           为什么要控制查询按钮只能发送一次？

我们有的时候制作的系统中多多少少会有一些查询的按钮，而有的系统数据较多、访问人数量比较大的时候就会导致查询速度有点慢、而不懂程序的用户则会不停地点击（学程序前的我就是..嘿嘿）,这样会给服务器造成极大的压力；

而知道了这个问题后，我们程序员的任务就来了，而去解决这个问题的一个办法就是：

        控制它只能发送一次请求。

这里直接放上代码：

《只发送一次》

点我试试

        Vue实例中定义的方法：

 测试：

---

二、自定义组件

        2.1 定义组件

                我们首先来尝试一下如何自定义一个简单的组件；

                利用Vue.component('组件名'，{}）

然后在边界中直接使用：

    
《简单组件》
    

 运行我们可以看到原本没有的组件已经有了效果： 

        2.2 组件的通信-父传子

        当我们需要用到组件之间的通信-也就是参数的传递，

例如父传子的时候，就可以用到template、props；

        在边界中定义要传递的参数：

在边界中定义放好要传递的参数：


    
父组件 传参 给 子组件
    
    

         最后就让我们一起来运行看看效果：

        2.3 子传父

                看过了父传子，接着我们来看看怎么实现子传父；

实现子传父的关键要素：

        $emit注册自定义事件：this.$emit('事件名'，参数)

        Leaf就直接把代码放上，然后讲讲实现思路。

    
子组件 传参 给 父组件
    
    

        代码实现思路顺序：

1、在template自定义组件中绑定了事件sub；

2、在sub事件中定义好要传递的参数；

3、利用$emit注册自定义事件，把参数放进去；

4、在自定义组件中使用自定义事件触发外部组件（就是父部）中的方法，直接接收传递过来的参数。

debugger运行：

我们可以看到最后就跳到了父部组件的xxx方法里了。

---

三、表单综合案例

这是个结合Leaf的前几篇文章综合编写的一个表单提交案例，

可以看一下然后自行运行理解。

        3.1 案例源码

                这里就放上案例代码：

	
		
		
		
		
	
	
		

			
			

				姓名： 

				密码： 

				性别：
					男
					女 

				爱好：
					

						{{l.name}}
					
 

				英语水平：
					
						{{e.name}}
					 

				
				
				
				
			
		
	
	

        3.2 运行测试

                

        测试完毕！！！