具体的实现结果和功能都在
vscode——VUE父子通信的双向绑定实例（复杂但易懂）（一）
更改的部分为：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>父子通信的双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<cpn :number1 = "num1" :number2 = "num2"
@number1-change ="num1Change" @number2-change ="num2Change"></cpn>
</div>
<template id="cpn">
<div>
<h2>子传父：{{number1}}</h2>
<h2>父传子：{{dnumber1}}</h2>
<input type="text" v-model ="dnumber1" >
<h2>子传父：{{number2}}</h2>
<h2>父传子：{{dnumber2}}</h2>
<input type="text" v-model ="dnumber2" >
</div>
</template>
<script>
var app= new Vue({
el: '#app',
data: {
num1:0,
num2:1
},
methods: {
num1Change(value){
this.num1 = parseFloat(value)//string转化number
},
num2Change(value){
this.num2 = parseFloat(value)
}
},
components:{
cpn:{
template:'#cpn',
props:{
number1:Number,
number2:Number
},
data() {
return {
dnumber1 : this.number1,
dnumber2 : this.number2
}
},
watch: {
dnumber1(newValue){
this.dnumber2 = newValue * 100
this.$emit('number1-change',newValue)
},
dnumber2(newValue){
this.dnumber1 = newValue / 100
this.$emit('number2-change',newValue)
}
},
},
}
});
</script>
</body>
</html>