本案例先将父组件的data传到子组件,然后子组件通过input的数据双向绑定(当修改输入框内容时,子组件的数据也同步修改),然后再把子组件输入的值传给父组件( const qpp=vue({.....}))的data,同时第一个数据是第二个的100倍,第二个数据是第一个的一百分之一。
运行结果
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<cpn :number1="num1" :number2="num2" @num1input="num1input" @num2input="num2input"></cpn>
</div>
<template id="cpn">
<div>
props:{{number1}}
data:{{dnum1}}
<!--<input type="text" v-model="dnum1" />-->
<input type="text" :value="dnum1" @input="num1input" />
props:{{number2}}
data:{{dnum2}}
<input type="text" :value="dnum2" @input="num2input" />
</div>
</template>
<script>
const cpn={
template:"#cpn",
props:{
number1:Number,
number2:Number
},
data(){
return { //不能对porps里面的数据直接操作
dnum1:this.number1,
dnum2:this.number2,
}
},
methods:{
num1input(event){
this.dnum1=event.target.value,
this.$emit("num1input",this.dnum1)
this.dnum2=this.dnum1*100,
this.$emit("num2input",this.dnum2)
},
num2input(event){
this.dnum2=event.target.value,
this.$emit("num2input",this.dnum2)
this.dnum1=this.dnum2/100,
this.$emit("num1input",this.dnum1)
},
}
};
const app=new Vue({
el:"#root",
data:{
num1:1,
num2:2
},
components:{
cpn
},
methods:{
num1input(value){
this.num1=parseInt(value) //转换成整数,因为传过来的是字符串
},
num2input(value1){
this.num2=parseInt(value1)
},
},
computed:{
},
filters:{ //过滤器
}
})
</script>
</body>
</html>