vue 组件双向绑定

给我一瓶冰阔洛

已于 2022-08-31 17:18:12 修改

阅读量156

点赞数

分类专栏： vue 文章标签： vue 组件双向绑定

于 2022-08-31 17:14:23 首次发布

本文链接：https://blog.csdn.net/qq_43035350/article/details/126626742

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>	
	
<div id="app">
	<cpn :number1="num1"  :number2="num2" ></cpn>
</div>

<template id="demo">
	<div>
		<h3>{{number1}}</h3>
		<input type="text" v-model="number1">
		
		<h3>{{number2}}</h3>
		<input type="text" v-model="number2">
	</div>
</template>

<script>
    const app = new Vue({
        el : '#app',
        data : {
			num1:123,
			num2:456
        },
		components:{
			cpn:{
				template:"#demo",
				props: {
					number1:Number,
					number2:Number
				},
			}	
		},
	 })
	
</script>

 
</body>
</html>

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>	
	
<div id="app">
	<cpn :number1="num1"  :number2="num2" 
	@numchange1="num1change"  @numchange2="num2change"
	></cpn>
</div>

<template id="demo">
	<div>
		<h3>{{number1}}</h3>
		<h4>data.dataNumber1: {{dataNumber1}}</h4>
		<input type="text" :value="dataNumber1" @input="numInput1">
		
		<h3>{{number2}}</h3>
		<h4>data.dataNumber2: {{dataNumber2}}</h4>
		<input type="text" :value="dataNumber2" @input="numInput2">
	</div>
</template>

<script>
    const app = new Vue({
        el : '#app',
        data : {
			num1:"123",
			num2:"456"
        },
		components:{
			cpn:{
				template:"#demo",
				props: {
					number1:String,
					number2:String
				},
				data:function(){
					return {
						dataNumber1:this.num1,
						dataNumber2:this.num2
					}
				},
				methods: {
					numInput1(event) {
						this.dataNumber1 = event.target.value
						this.$emit("numchange1", this.dataNumber1)
						//$emit 事件发射    v-on:numchange1  监听
					},
					numInput2(event) {
						this.dataNumber2 = event.target.value
						this.$emit("numchange2", this.dataNumber2)
					}
				},
			}	
		},
		methods: {
			num1change(e) {
			
				this.num1 = e
			},
			num2change(e) {
				this.num2 = e
			}
		},
	 })
	
</script>

 
</body>
</html>