一、事件处理器
1.1 定义
在Vue中，事件处理器是用于响应和处理特定事件的函数或方法。Vue的事件处理器可以绑定到模板中的事件指令（如
@click）或通过JavaScript代码进行手动绑定。
1.2 类型
Vue事件处理器的定义是为了监听和响应特定类型的事件。在Vue中，事件处理器可以是以下几种形式之一：
- 匿名函数：在Vue事件处理器中，匿名函数可以用来定义事件处理函数。匿名函数是指没有显式命名的函数，它通常在需要简单的事件处理逻辑时使用。匿名函数可以用于处理复杂的逻辑或者需要动态绑定的情况。然而，需要注意的是匿名函数会导致每次重新渲染组件时创建一个新的函数实例，可能会引起不必要的性能开销。如果需要在多个地方复用相同的事件处理逻辑，建议将函数定义为命名函数。
- 组件方法：在Vue事件处理器中，组件方法可以用来定义事件处理函数。组件方法是指在Vue组件实例中定义的函数，可以在组件的生命周期中使用，并且可以在模板中通过事件绑定调用。在Vue组件中定义组件方法的方式有两种：一种是使用普通的函数定义，另一种是使用ES6的箭头函数定义。
- 组件内联方法：在Vue中，可以使用组件内联方法来定义事件处理器。组件内联方法指的是在模板中直接定义事件处理函数，而不必在组件的
methods选项中声明方法。- 在父组件中使用子组件的方法作为事件处理器：在Vue中，"父组件中使用子组件的方法作为事件处理器"指的是将子组件的方法作为回调函数传递给父组件，在父组件中作为事件处理器进行调用。这样做的目的是允许子组件向父组件传递信息或触发某些行为。
1.3 阻止单击事件冒泡
在Vue中，可以使用事件修饰符
.stop来阻止事件冒泡。通过在事件处理函数中加入.stop修饰符，可以阻止事件向上传播到父元素或祖先元素。
未使用前，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件处理</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <style type="text/css"> .one{ background-color: gold; height: 400px; width: 400px; } .two{ background-color: pink; height: 300px; width: 300px; } .three{ background-color: palegreen; height: 200px; width: 200px; } .four{ background-color: skyblue; height: 100px; width: 100px; } </style> </head> <body> <div id="app"> <div class="one" @click="fun1"> <div class="two" @click="fun2"> <div class="three" @click="fun3"> <div class="four" @click="fun4"></div> </div> </div> </div> <input :value="msg" /> <button @click="clickMe">点我</button> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { msg:'123' }; }, methods:{ fun1(){ alert("fun1"); }, fun2(){ alert("fun2"); }, fun3(){ alert("fun3"); }, fun4(){ alert("fun4"); }, clickMe(){ console.log(this.msg); } } }); </script> </body> </html>
效果如下：
在@click后加.stop，如下：
<div class="one" @click.stop="fun1"> <div class="two" @click.stop="fun2"> <div class="three" @click.stop="fun3"> <div class="four" @click.stop="fun4"></div> </div> </div> </div>
效果如下：
1.4 事件只能单击一次
Vue中的事件并不限制只能单击一次，而是可以通过事件修饰符
.once来指定只触发一次的行为。使用
.once修饰符可以确保事件仅绑定一次，无论触发多少次都只会执行一次相应的事件处理函数。
为使用前，效果如下：
在@click后加入.once后，效果如下：
二、表单的综合案例
2.1 定义
Vue表单是指在Vue.js框架中用于处理用户输入的一组相关元素和功能。它允许你构建交互式的表单界面，处理用户的输入数据，并将其绑定到Vue实例的数据中。Vue表单提供了一种简单、灵活的方式来管理表单元素，实现数据的双向绑定、验证和提交。
2.2 常用功能
- 数据绑定：使用Vue的
v-model指令，可以将表单元素的值与Vue实例中的数据进行双向绑定，实现用户输入的值与数据的同步更新。- 表单验证：Vue提供了一些验证指令和选项，可以对输入进行验证，并提供反馈给用户。可以使用内置的验证指令如
required、min、max等，或者使用自定义验证逻辑进行表单验证。- 事件处理：Vue允许你监听表单元素的各种事件，如
@input、@change、@submit等，并在事件处理器中执行相应的逻辑。这使得你可以对用户的交互做出即时的响应。- 表单提交：Vue提供了便捷的方式来处理表单的提交。可以通过监听表单的
@submit事件，执行自定义的提交逻辑，或者使用Vue的HTTP库与后端API进行通信。
3.3 代码演示与讲解
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单综合案例</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> 姓名：<input name="name" v-model="name"/><br /> 密码：<input type="password" v-model="pwd"/><br /> 性别：<span v-for="s in sexList"> <input type="radio" :name="sex" v-model="sex" :value="s.id"/>{{s.name}} </span><br /> 籍贯：<select name="myAddr" v-model="myAddr"> <option v-for="a in address" :value="a.id">{{a.name}}</option> </select><br /> 爱好：<span v-for="h in hobby"> <input type="checkbox" v-model="myLike" name="myLike" :value="h.id"/>{{h.name}} </span><br /> 个人简介：<textarea v-model="sign" cols="20" rows="2"></textarea><br /> 同意：<input type="checkbox" v-model="ok"/><br /> <button v-show="ok" @click="dosub">提交</button> </div> <script type="text/javascript"> new Vue({ el:'#app', data(){ return { name:'刘三金', pwd:'54188', sexList:[ { name:'男', id:1 }, { name:'女', id:2 }, { name:'不详', id:3 } ], hobby:[ { name:'唱', id:1 }, { name:'跳', id:2 }, { name:'Rap', id:3 }, { name:'篮球', id:4 } ], myLike:[], address:[ { name:'湖南', id:1 }, { name:'湖北', id:2 }, { name:'河南', id:3 }, { name:'河北', id:4 } ], myAddr:null, sign:null, ok:false, sex:null // 定义一个变量 sex，用于接收选中的性别值 }; }, methods:{ dosub(){ var obj = {}; obj.name = this.name; obj.pwd = this.pwd; obj.sex = this.sex; // 将选中的性别值赋给 sex obj.address = this.myAddr; obj.love = this.myLike; obj.sign = this.sign; console.log(obj); } } }); </script> </body> </html>
演示效果如下：
三、组件通信
3.1 定义
Vue组件通信是指在Vue.js应用程序中，不同的组件之间传递数据、共享状态或者触发事件的过程。由于Vue采用了组件化开发的方式，应用程序通常由多个组件组成，每个组件都有自己的作用和功能。组件通信允许这些组件之间进行交互和数据传递，使得应用程序能够协调工作并展示有效的用户界面。
3.2 实现方式
在Vue中，组件通信可以通过以下几种方式实现：
- 父子组件通信：父子组件之间的通信是最常见的情况。父组件可以通过props将数据传递给子组件，子组件通过props接收数据。子组件可以通过触发事件（使用$emit）通知父组件关于它的状态或者执行的操作。
- 子父组件通信：与父子组件通信相反，子组件可以使用$emit触发的事件，将数据传递给父组件。父组件可以通过监听子组件触发的事件，接收并处理这些数据。
- 兄弟组件通信：兄弟组件之间是平级关系，它们之间的通信涉及到父组件的介入。兄弟组件可以通过将数据传递给共同的父组件，然后通过props将数据传递给另一个兄弟组件。另外，你还可以使用Vue的全局事件总线或者状态管理模式（如Vuex）来实现兄弟组件之间的通信。
- 跨级组件通信：当组件层级比较深时，可能存在跨越多个层级的组件通信。在这种情况下，可以通过在较高层级的组件中使用emit触发事件，然后在较低层级的组件中使用emit触发事件，然后在较低层级的组件中使用on监听事件来实现。
- 混入（Mixin）和插槽（Slot）：混入是一种可重用的代码片段，它可以在多个组件中共享。你可以定义混入对象，然后在组件中使用
mixins选项将其混入。插槽允许组件在其模板中接受内容，使得父组件可以向子组件插入具体的内容。
3.3 自定义组件
3.3.1 定义
自定义组件是在Vue.js应用程序中编写的可复用的组件，用于实现特定功能或展示特定内容。Vue中的自定义组件通过定义Vue组件选项来创建，可以包含HTML模板、数据、计算属性、方法以及生命周期钩子等。自定义组件可以通过props接收传入的数据，通过事件向父组件通信，以及自身内部进行数据管理和状态变更。
3.3.2 自定义组件代码演示
实现自定义组件的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件传参父传子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <p>自定义组件</p> <my-<button type="button">xx</button> </div> <script type="text/javascript"> new Vue({ el:'#app', components:{ 'mybutton':{ template:'<button>xx</button>' } }, data(){ return { msg:'123' }; }, methods:{ fun1(){ alert("fun1"); } } }); </script> </body> </html>
浏览器播放效果：
3.4 组件通信父传子
3.4.1 定义
在Vue中，"父传子"是指在组件之间进行通信时，父组件向子组件传递数据或信息的过程。父组件可以通过属性（props）将数据传递给子组件，使子组件能够接收并使用这些数据。
3.4.2 传递过程
父组件向子组件传递数据的过程如下：
- 父组件定义一个属性（props），并将需要传递给子组件的数据绑定到这个属性上。
- 在父组件的模板中使用子组件，并将属性绑定到子组件的相应属性上。
- 子组件可以通过props接收父组件传递的属性，并在自己的模板中使用这些属性数据。
3.4.3 代码演示
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件传参父传子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <p>自定义组件</p> <button type="button">xx</button><br /> <p>组件通信——父传子</p> <my-button m="小三金"></my-button> <p>组件通信——父传子2</p> <my-button m="化生子" n="10"></my-button> </div> <script type="text/javascript"> new Vue({ el:'#app', components:{ 'my-button':{ props:['m','n'], template:'<button @click="clickMe">被{{m}}点击了{{n}}次</button>', data:function(){ return { n:1 } }, methods:{ clickMe(){ this.n++; } } } }, }); </script> </body> </html>
演示结果：
3.5 组件通信子传父
3.5.1 定义
"子传父"是指在Vue组件间进行通信时，子组件向父组件传递数据或触发事件的过程。这种通信方式常用于子组件产生的数据或行为需要被父组件感知和处理的情况。
3.5.2 传递步骤
要实现"子传父"的通信，可以按照以下步骤进行：
- 在子组件中定义一个触发事件的方法，一般是通过
$emit方法来触发自定义事件。可以在该方法中传递需要传递给父组件的数据作为参数。- 在父组件的模板中使用子组件，并监听子组件触发的事件，并指定父组件中对应的方法来处理事件。
- 在父组件中定义一个方法，该方法会接收子组件传递的数据作为参数，并在处理中进行相应的逻辑操作
3.5.3 代码演示
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>组件传参子传父</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <p>组件通信——子传父</p> <my-button m="翰林RushB" n="10" @xxx='getParam'></my-button> </div> <script type="text/javascript"> new Vue({ el:'#app', components:{ 'my-button':{ props:['m','n'], template:'<button @click="clickMe">被{{m}}点击了{{n}}次</button>', data:function(){ return { count:1 } }, methods:{ clickMe(){ let name = '黑鬼烨'; let bname = '来自九院压力怪刘三金与黑鬼烨的强强对决'; let info = '至此翰林也加入了战斗'; this.$emit('xxx', name, bname, info); } } } }, data(){ return { msg:'1234' }; }, methods: { getParam(a, b, c){ console.log(a, b, c); } } }); </script> </body> </html>
演示效果如下：
四、收获
学习Vue组件通信能够带来以下收获：
- 模块化和重用性：Vue组件通信允许将应用程序拆分为多个小的、可重用的组件，每个组件负责特定的功能。这样可以提高代码的可维护性，并且可以在不同的应用程序中重复使用这些组件。
- 数据流的清晰性：Vue组件通信使得数据流在组件之间更加明确和可追踪。通过明确指定数据流的方向，能够更好地理解和管理应用程序中数据的传递和状态的管理。
- 状态共享和传递：组件通信使得不同组件之间可以共享状态和数据。父组件可以向子组件传递数据，使得子组件可以使用这些数据进行展示和逻辑处理。同时，子组件也可以通过事件将数据传递给父组件，以实现与父组件的交互和协作。
- 可扩展性和灵活性：通过组件通信的方式，可以轻松扩展和修改应用程序的功能，因为每个组件都是独立的，可以根据需要增加、删除或替换组件。这样使得应用程序的架构能够很好地适应变化和演进。
- 多层级组件之间的交互：组件通信使得多层级的组件之间能够进行有效的交互和通信。父组件可以传递数据给子组件，子组件也可以通过事件将数据传递给父组件或者其他组件，实现不同层级之间的数据传递和协作。
最后Vue模板语法（下）就到这里，祝大家在敲代码的路上一路通畅!
