Vue 3：事件监听与表单处理-优快云博客

本文链接：https://blog.youkuaiyun.com/q736317048/article/details/106360009

本文介绍Vue 3中如何监听事件，包括表单元素如复选框、单选框和选择框的处理。同时探讨了组件的使用，强调组件的可复用性，以及如何通过插槽分发内容来实现内容动态插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上一篇文件< template>标签：作用类似于一个标签，当我们编译不会为html代码

用于存放v语句的处理

			<template v-if="isShow"> //在运行时不会成为一个真正的标签 可以理解为一个箱子
			//当我们运行在页面时 只显示箱子里的内容
				是否显示
			</template>
			date:{isShow:true}//true显示 false不显示

监听事件

冒泡事件
			<div @click="fun1">
				其他内容
				<!--stop 阻止点击事件传播-->
					<!--prevent 阻止标签默认跳转事件-->
				<a @click.stop.prevent="fun2" href="https://www.baidu.com">
					点击
				</a>
			</div>
			var app = new Vue({
				methods:{
					fun1:function(){
						alert(1)
					},
					fun2:function(){
						alert(2)
					}
				}
			})

表单

复选框

			喜欢的游戏：
			<input type="checkbox" value="1" v-model="checks" />LOL
			<input type="checkbox" value="2" v-model="checks" />刀塔
			<input type="checkbox" value="3" v-model="checks" />CS:go
			<p>绑定的值是{{checks}}</p>
			var app = new Vue({
				data:{checks:[]}
			})

单选框

			你的性别
			<input type="radio" value="a" v-model="sex" />男
			<input type="radio" value="b" v-model="sex" />女
			<p>绑定的值{{sex}}</p>
			<script>
				var app = new Vue({
					el:"#d3",
					data:{
						sex:""//单选框只用一个值
					}
				})
			</script>

选择框(下拉框)

			<!--选择框(下拉框) disabled属性禁用 -->
			<select v-model="sel">
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			<P>绑定的值{{sel}}</P>
			<script>
				var app = new Vue({
					el:"#d3",
					data:{
						sel:'A'//给默认值
					}
				})
			</script>

组件

可复用，页面是载体，组件内可嵌套组件

<body>
		<div id="d4">
			<com1 name="张三"></com1>
			<com1 name="李四"></com1>
			<com1 name="王五"></com1>
		</div>
		<script>
			Vue.component("com1",{
				//数组传值 绑定外部参数 name也可以指定外部data属性
				props:["name"],
				//绑定数据 data在组件中是一个函数 每个组件都是相互独立的
				data:function(){
					return{
						str:"data"
					}
				},
				template:`<h1>这里是组件 {{str}}
							外部参数{{name}}
						</h1>`//使用反引
			})
			var app = new Vue({
				el:"#d4"
			})
		</script>
	</body>

只能拥有一个根元素，声明统一外部元素

				template:`
				//特性 声明公共div
					<div>
						<h1>这里是组件 {{str}}
							外部参数{{name}}
						</h1>
					</div>
					`

子组件如何向外部父组件发送数据

	<body>
		<div id="d4">
			<com1 name="张三" @com="fun1"></com1>
			<com1 name="李四"></com1>
			<com1 name="王五"></com1>
		</div>
		<script>
			Vue.component("com1",{
				//数组传值 绑定外部参数 name也可以指定外部data属性
				props:["name"],
				//绑定数据 data在组件中是一个函数 每个组件都是相互独立的
				data:function(){
					return{
						str:"data"
					}
				},
				template:`
				//特性 声明公共div
				//当点击时会触发com事件 外部绑定监测后触发函数
					<div>
						<h1>这里是组件 {{str}}
							外部参数{{name}}
						</h1>
						<h1 @click="$emit('com')">点击</h1>
					</div>
					`
			})
			var app = new Vue({
				el:"#d4",
				methods:{
					fun1:function(){
						alert(1)
					}
				}
			})
		</script>
	</body>

通过插槽分发内容

		<div id="d4">
			<com1 name="张三" @com="fun1">
				<!--也可以理解为占位符-->
				<h1>这里是插入组件的插槽</h1>
			</com1>	<!--父组件-->
			<com1 name="李四"></com1>
			<com1 name="王五"></com1>
		</div>
		template:
		`
				//特性 声明公共div
				//当点击时会触发com事件 外部绑定监测后触发函数
					<div>
						<h1>这里是组件 {{str}}
							外部参数{{name}}
						</h1>
						//希望出现在点击上面
						<slot></slot>
						<h1 @click="$emit('com')">点击</h1>
					</div>
		`