<!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>