vue双向改变父子组件的数据...

最新推荐文章于 2023-12-26 12:24:45 发布

LoveMe_LoveMyDog

最新推荐文章于 2023-12-26 12:24:45 发布

阅读量106

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/LoveMe_LoveMyDog/article/details/115445358

版权

vue双向改变父子组件的数据…

其实我也不知道这个该怎么形容，上代码吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 父传子的具体实现位置 :number1="num1" -->
			<cpn :number1="num1" 
			:number2="num2"
			@num1change="Rnum1change"
			@num2change="Rnum2change"></cpn>
			<!-- @num2change传出事件？具体实现位置 Rnum2change：父组件介绍子组件传出事件？的事件名字-->
		</div>
		<template id="cpn">
			<div>
				<h2>props:{{number1}}</h2>
				<h2>data:{{dnumber1}}</h2>
				<!-- <input type="text" v-model="dnumber1" /> -->
				<!-- 改变子组件里面数据的值 -->
				<input type="text" :value="dnumber1" @input="num1Input"/>
				<h2>props:{{number2}}</h2>
				<h2>data:{{dnumber2}}</h2>
				<!-- <input type="text" v-model="dnumber2" /> -->
				<input type="text" :value="dnumber2" @input="num2Input"/>
			</div>
		</template>
		<script>
			
			const app = new Vue({
				el:"#app",
				data:{
					num1:1,
					num2:2
				},
				methods:{
					/* 父组件接收处理数据的函数 */
					Rnum1change(value){
						/* 把收到的数据处理,改变父组件data的值 */
						this.num1=parseFloat(value)
					},
					Rnum2change(value){
						this.num2=parseFloat(value)
					}
				},
				components:{
					cpn:{
						template:`#cpn`,
						props:{//父传子
							number1:Number,//定义子组件显示num的类型，子组件的数据的名字
							number2:Number
						},
						data(){
							return{
								dnumber1:this.number1,
								dnumber2:this.number2,
							}
						},
						methods:{
							num1Input(event){
								this.dnumber1=event.target.value
								/* 把子组件里面改变的值传到父组件 */
								/* num1change:传出的事件？名字 this.dnumber1：传出的参数*/
								this.$emit("num1change",this.dnumber1)
								//dnumber1输入，dnumber2变为dnumber1的100倍
								this.dnumber2=this.dnumber1 * 100;
								this.$emit("num2change",this.dnumber2)
							},
							num2Input(event){
								this.dnumber2=event.target.value
								this.$emit("num2change",this.dnumber2)
								//dnumber2输入，dnumber1变为dnumber2的1/100
								this.dnumber1=this.dnumber2 / 100;
								this.$emit("num1change",this.dnumber1)
							},
							
						}
					}
				}
			})
		</script>
	</body>
</html>

这个主要做的就是通过input标签，改变子组件里面的数据，再通过自定义事件（$emit来发送改变的事件），在父组件里面接收它。。。。。。

LoveMe_LoveMyDog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue双向改变父子组件的数据...

vue双向改变父子组件的数据…其实我也不知道这个该怎么形容，上代码吧<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <
复制链接

扫一扫