Vue表单&局部组件

JoneClassMate

已于 2022-08-26 16:03:16 修改

阅读量235

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-08-24 22:14:01 首次发布

本文链接：https://blog.csdn.net/m0_63300795/article/details/126513654

版权

1. Vue表单

2. 局部组件

1. Vue表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css" rel="stylesheet">
		<!-- 引入Vue.js文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
	</head>
	<body>
		<div id="form">
			<h2>{{msg}}</h2>
			<div>
				<label>账号：<input type="text" v-model.trim="name" /></label>
				
			</div>
			<div>
				<label>密码：<input type="password" v-model="pwd" /></label>
			</div>
			<div>
				<label>年龄：<input type="text" v-model.number="age" /></label>
			</div>
			<div>
				<label>性别：<input type="radio" v-model="sex" value="0" />男</label>
				<label><input type="radio" v-model="sex" value="1" />女</label>
			</div>
			<div>
				<label>爱好：</label>
				<div v-for="h in hobbies">
					<input type="checkbox" v-model="hobb" :value="h"/>{{h}}
				</div>
			</div>
			<div>
				<label>地址：
					<div>
						<!-- <select v-model="addr">
							<option v-for="a in address" :value="a.cname">{{a.cname}}</option>
						</select> -->
						<el-select v-model="addr" placeholder="请选择城市">
							<el-option v-for="a in address" :key="a.cid" :lable="a.cname" :value="a.cname">{{a.cname}}</el-option>
						</el-select>
					</div>
				</label>
			</div>
			<div>
				<label>备注：
					<div>
						<textarea v-model="bz"></textarea>
					</div>
				</label>
			</div>
			<div>
				<input type="button" v-on:click="submit" value="提交"/>
			</div>
		</div>
	</body>
	<script>
		//实例一个vue
		new Vue({
			el:"#form",//挂载区域
			data:function(){//属性
				return {
					msg:"Vue表单提交",
					name:null,
					pwd:null,
					sex:0, //0男，1女
					hobbies:["洗脚","按摩","打牌","敲代码"],
					hobb:[],
					address:[
						{cid:1,cname:"长沙"},
						{cid:2,cname:"麻阳"},
						{cid:3,cname:"怀化"},
						{cid:4,cname:"凤凰"}
					],
					addr:null,
					bz:null,
					age:null
					
				}
			},
			methods:{//方法
				submit:function(){
					var data={
						name:this.name,
						pwd:this.pwd,
						sex:this.sex,
						hobb:this.hobb,
						addr:this.addr,
						bz:this.bz,
						age:this.age
					}
					console.info(data)
				}
			}
		})
	</script>
</html>

2. 局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css" rel="stylesheet">
		<!-- 引入Vue.js文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
	</head>
	<body>
		<div id="form">
			<h2>局部组件</h2>
			<button-counter frist-name="给李鑫一个大鼻窦" @a-b="abc"></button-counter>
		</div>
	</body>
	<script>
		//实例一个vue
		new Vue({
			el:"#form",//挂载区域
			data:function(){//属性
				return {
					count:0
					
				}
			},
			methods:{//方法
				abc:function(msg){
					this.count=msg;
					console.info("abc...")
					console.info("count=%i",this.count)
				}
			},
			components:{//局部组件
				'button-counter':{
					props:["fristName"],
					template:'<div><button @click="oncThree">局部组件{{msg}}</button></div>',
					data:function(){
						return {
							msg:0
						}
					},
					methods:{
						onc:function(){
							this.msg++;
							console.info("msg=%i",this.msg)
						},
						oncThree:function(){
							this.msg++;
							if(this.msg%3==0){
								console.info("msg=%i",this.msg)
								//触发事件，往父组件传值
								this.$emit("a-b",this.msg) 
								console.info(this.fristName)
							}
						}
					}
				}
			}
		})
	</script>
</html>

注1：Vue自定义事件是为组件间通信设计
vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

父Vue实例->Vue实例，通过prop传递数据
子Vue实例->父Vue实例，通过事件传递数据

注2：事件名
不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
建议使用“短横线分隔命名”，例如：three-click

JoneClassMate

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue表单&局部组件

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定。建议使用“短横线分隔命名”，例如：three-click。父Vue实例->Vue实例，通过prop传递数据。子Vue实例->父Vue实例，通过事件传递数据。：Vue自定义事件是为组件间通信设计。...
复制链接

扫一扫