<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件通信案例</title>
</head>
<body>
<div id="app">
<cpn :number1="num1"
:number2="num2"
@changenum1="num1change"
@changenum2="num2change"></cpn>
</div>
<template id="cpn">
<div>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<!-- 这里不直接使用v-model,而是使用v-bind:value 和v-on:input实现双向数据绑定为了更好的传递数据 -->
<input type="text" :value="dnumber1" @input="inputnum1">
<h2>props:{{number2}}</h2>
<h2>data:{{dnumber2}}</h2>
<input type="text" :value="dnumber2" @input="inputnum2">
</div>
</template>
<script src="js/vue.js"></script>
<script>
const vue = new Vue({
el:"#app",
data:{
num1:1,
num2:0
},
methods: {
num1change(value){
// 默认传值是string类型,需要转型
this.num1 = parseFloat(value);
},
num2change(value){
this.num2 = parseFloat(value);
}
},
components:{
cpn:{
template:"#cpn",
props:{
number1:Number,
number2:Number
},
data(){
return{
dnumber1 : this.number1,
dnumber2 : this.number2
}
},
methods: {
inputnum1(event){
this.dnumber1 = event.target.value;
//通过发送自定义事件,来给父组件传递数据
this.$emit("changenum1",this.dnumber1);
},
inputnum2(event){
this.dnumber2 = event.target.value;
this.$emit("changenum2",this.dnumber2);
}
},
}
}
})
</script>
</body>
</html>
vue中的组件通信结合数据双向绑定
最新推荐文章于 2022-10-25 14:11:12 发布