Vue父子组件的数据传递案例(v-model双向绑定父子组件数据)
示例代码:
<div id="app">
<mynpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change" />
</div>
<template id="npn">
<div>
<p>props:{{number1}}</p>
<p>data:{{dnumber1}}</p>
<input type="text" :value="dnumber1" @input="num1Input">
<p>props:{{number2}}</p>
<p>data:{{dnumber2}}</p>
<input type="text" :value="dnumber2" @input="num2Input">
</div>
</template>
<script>
const mynpn = {
template: '#npn',
// 通过props传递的参数不能通过v-model进行改变
props: {
number1: Number,
number2: Number,
},
// 若想对父组件的数据进行改变,可以设置data来进行改变
data() {
return {
dnumber1: this.number1,
dnumber2: this.number2,
}
},
methods: {
num1Input(event) {
this.dnumber1 = event.target.value;
this.$emit('num1change', this.dnumber1);
this.dnumber2 = this.dnumber1 * 2;
this.$emit('num2change', this.dnumber2)
},
num2Input(event) {
this.dnumber2 = event.target.value;
this.$emit('num2change', this.dnumber2);
this.dnumber1 = this.dnumber2 / 2;
this.$emit('num1change', this.dnumber1)
}
}
}
const app = new Vue({
el: '#app',
data: {
message: 'Hello World',
num1: 1,
num2: 2
},
methods: {
num1change(value) {
this.num1 = parseInt(value);
},
num2change(value) {
this.num2 = parseInt(value);
},
},
components: {
mynpn
}
});
</script>
运行截图: