练习简述:
子组件中显示输入框中的数值,有上下两个显示与输入的组合,但是上面是下面的100分之一,下面是上面的100倍。并且在子组件中数值被修改的同时,父组件中的数据也应该被相应的修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="jdg">
<tmp :number1="num1"
:number2="num2"
@num1change="changenum1methods"
@num2change="changenum2methods"></tmp>
</div>
<template id="tmp">
<div>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<input type="text" :value="dnumber1" @input="methodsfornum1($event.target.value)">
<h2>props:{{number2}}</h2>
<h2>data:{{dnumber2}}</h2>
<input type="text" :value="dnumber2" @input="methodsfornum2($event.target.value)">
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#jdg',
data: {
num1:0,
num2:0
},
computed: {
},
methods: {
changenum1methods(value){
this.num1=value;
},
changenum2methods(value){
this.num2=value;
}
},
filters: {
},
components: {
tmp:{
template:'#tmp',
data(){
return{
dnumber1:0,
dnumber2:0
}
},
props:{
number1:Number,//从父组件中接收数据
number2:Number
},
methods:{
methodsfornum1(n){
this.dnumber1=n*1;
//我们为了同时修改父组件中的数据,所以需要把修改的数据传回父组件
this.$emit('num1change',this.dnumber1)
//如果我们需要同时修改num2的值
this.dnumber2=n*100;
this.$emit('num2change',this.dnumber2)
},
methodsfornum2(n){
this.dnumber2=n*1;
this.$emit('num2change',this.dnumber2)
//我们同时还需要修改num1的值
this.dnumber1=n/100;
this.$emit('num1change',this.dnumber1)
}
}
}
}
})
</script>
</body>
</html>
代码思路:
(1)由于需求要让组件数据和父组件数据同步修改,所以我们需要使用props来接收父组件中的数据
(2)由于props中数据只能由父组件中的数据改变所以我们不能直接绑定,所以我们需要借助子组件本身的数据
(3)但是我们不能直接v-model绑定数据,只能使用v-bind和@input来完成细节的操作
(4)动态绑定子组件本身的数据和输入框的value值,然后检测输入操作,检测到了就改变子组件本身的数据并发送信号给父组件,让父组件中的数据也改变为当前值。这样由于父组件中的数据改变了,那么子组件中props接收父组件数据的数据值也会同时发生改变。
(5)由于两个部分是互相影响的,所以我们需要在一个输入事件中发送num1和num2的数据修改的请求,操作类似