Vue事件处理器与组件通信详解-优快云博客

本文介绍了Vue中的事件处理器，包括如何绑定DOM事件、使用v-on指令和修饰符，以及组件间的通信方法，如父子组件、兄弟组件、全局事件总线和Vuex状态管理。

事件处理器

Vue模板语法中的事件处理器是指在Vue组件中绑定DOM事件，当事件发生时执行相应的方法或表达式。常见的事件包括点击事件@click、输入事件@input、鼠标移入事件@mouseover等等。

事件监听可以使用v-on 指令

2.1 事件修饰符

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

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

<a v-on:click.once="doThis"></a>

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

注1：什么是事件冒泡?
见“事件冒泡模型.png”

## demo3.1.html
2.2 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">

Vue为最常用的按键提供了别名

<input v-on:keyup.enter="submit">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title>事件处理器</title>
		<style type="text/css">
			.one{
				background-color: red;
				height: 400px;
				width: 400px;
			}
			.two{
				background-color: blue;
				height: 300px;
				width: 300px;
			}
			.three{
				background-color: pink;
				height: 200px;
				width: 200px;
			}
			.four{
				background-color: yellow;
				height: 100px;
				width: 100px;
			}
		</style>
	
	</head>
	<body>
		<div id="app">
			<dvi 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>	  
			</dvi>
				<p>提交答案</p>
						<button @click.once="dosub">提交</button>
						<p>按键修饰符</p>
						<input v-on:keyup.enter="dosub" />
		</div>	
				
		<script type="text/javascript">
		new Vue({
			el:"#app",
			data(){
				return{
					msg:'hello  小B 你相信光吗？',
					};
			},
			methods:{
				fun1(){
					alert("fun1")
				},
				fun2(){
					alert("fun2")
				},
				fun3(){
					alert("fun3")
				},
				fun4(){
					alert("fun4")
				},
					dosub(){
									alert("已做完，提交答案");
								}
			}
		});
		
		</script>
	
	</body>
</html>

Vue表单

Vue表单是一种用于收集用户输入信息的Web表单，它基于Vue框架的数据双向绑定特性，可以使开发者更加简单和方便地管理表单数据。Vue表单提供了一系列的组件，比如文本输入框、下拉列表、单选框、复选框等，开发者可以根据需要在界面上选择合适的组件，同时使用Vue的模板语法进行组件的渲染和绑定。

Vue表单中的组件通常由两部分组成，一部分是表单对象，用来表示表单的数据结构和验证规则，另一部分是表单控件，用来实现界面上的输入和操作行为。在Vue中，表单对象可以通过data选项或computed属性来定义，同时通过v-model指令与表单控件进行双向数据绑定，实现数据的自动更新。除此之外，Vue表单还提供了一些常用的验证规则和自定义验证函数，开发者可以根据需要进行使用和扩展。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>表单</title>
	</head>
	<body>
		<div id="app">
			<h1>标题</h1>
			<ul>
				<li>
					<p>vue表单</p>
					<label>姓名：</label><input v-model="uname" /><br />
					<label>密码：</label><input v-model="upwd" type="password" /><br />
					<!-- 将用户的输入值转为 Number 类型 -->
					<label>年龄：</label><input v-model.number="age" /><br />
					<label>性别：</label>
					<input type="radio" v-model="sex" name="sex" value="1" />男
					<input type="radio" v-model="sex" name="sex" value="0" />女<br />
					<label>爱好：</label>
					<div v-for="h in hobby">
						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					</div>
					<label>类别：</label>
					<select v-model="type">
						<option value="-1">===请选择===</option>
						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
					</select><br />
					<label>备注：</label>
					<textarea v-bind:value="mark"></textarea><br />
					确认<input type="checkbox" v-model="flag" />
					<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					uname: null,
					upwd: null,
					age: 10,
					sex: 1,
					hobby: [{
						id: 1,
						name: '洗脚'
					}, {
						id: 2,
						name: '看飞机'
					}, {
						id: 3,
						name: '上网'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: '男'
					}, {
						id: 2,
						name: '其他'
					}, {
						id: 3,
						name: '女'
					}],
					type: null,
					mark: '。。。',
					flag: false
				}
			},
			computed: {
				show: function() {
					return !this.flag;
				}
			},
			methods: {
				doSubmit: function() {
					console.log('doSubmit')
					var obj = {
						uname: this.uname,
						upwd: this.upwd,
						age:this.age+10,
						sex: this.sex,
						hobbies:this.hobbies,
						type: this.type,
						mark: this.mark,
					}
					console.log(obj);
				}
			}

		})
	</script>
</html>

总的来说，Vue表单的优点是它具有简单易用、数据双向绑定、验证规则灵活和可扩展性强等特点，适合于快速开发和维护大量的响应式表单

组件通信

Vue的组件通信是指不同组件之间进行数据和事件的传递的过程。在Vue中，

组件通信主要包括以下几种方式：

父子组件通信：

父组件可以通过props向子组件传递数据，子组件可以通过$emit事件向父组件发送数据。

兄弟组件通信：

兄弟组件通信需要通过共同的父组件来传递数据，可以通过props和$emit事件来实现。

跨级组件通信：

跨级组件通信也需要通过共同的父组件来传递数据，可以通过provide和inject实现，在父组件中提供数据，在后代组件中使用inject获取数据。

使用全局事件总线：

使用Vue实例作为事件总线，通过$on、$emit、$off等方法来实现组件之间的数据传递。

使用Vuex来进行状态管理：

Vuex是Vue官方推荐的状态管理库，可以将共享的状态抽离出来，放到单独的store中，供所有组件使用，可以通过调用store中的方法来实现数据的传递和状态管理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!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">
			<!-- 定义组件不能用驼峰命名 -->
			<!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 -->
			<my-button m="刘文"></my-button>
			<my-button m="刘鑫"></my-button>
			
			<!-- <button onclick=""></button> -->
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('my-button', {
			// props是定义组件中的变量的
			props:['m'],
			// template代表了自定义组件在页面上显示的类容
			template:'<button v-on:click="incrn">我被{{m}}点击{{n}}次</button>',
			data:function(){
				return {
					n:1
				}
			},
			methods:{
				incrn(){
					this.n++;
				}
			}
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
				};
			}
		})
	</script>
</html>