父子双向绑定
<body>
<div id="app">
<cpn :number1='num1' :number2='num2' @num1change='num1change' @num2change='num2change'></cpn>
// :number1='num1' :number2='num2' 利用父传子的原理将父组件的值传递给子组件 @num1change='num1change' @num2change='num2change'利用子传父的原理将子组件的值传递给父组件
</div>
</body>
<template id="cpn">
<div>
<h2>props:{{number1}}</h2>
// 父传子后number1的值
<h2>data:{{dnumber1}}</h2>
//子组件中作为数据的dnumber1的值
<input type="text" :value='dnumber1' @input='num1Input'>
// 利用v-model原理进行双向绑定,将input中的value与dnumber1绑定 input事件由num1Input监听
<h2>props:{{number2}}</h2>
<h2>data:{{dnumber2}}</h2>
<input type="text" :value='dnumber2' @input='num2Input'>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//父组件
el: "#app",
data: {
num1: 1,
num2: 0
},
methods: {
num1change(value) {
this.num1 = parseInt(value)
},
//接收通过子组件发射函数传递的参数(由于input输入的值默认为string类型所以转换为number型)
num2change(value) {
this.num2 = parseInt(value)
}
},
components: {
//子组件
cpn: {
template: "#cpn",
props: {
number1: Number,
number2: Number
//将number1,2定义为number型
},
data() {
return {
dnumber1: this.number1,
dnumber2: this.number2
}
//在父传子完成后将number1,2的值作为数据存储至dnumber1,2中
},
methods: {
num1Input(event) {
this.dnumber1 = event.target.value;
this.$emit('num1change', this.dnumber1)
},
//将dnumber的值赋予input中同时同时监听数据的改变,通过子传父原理将改变后的数据传入父组件
num2Input(event) {
this.dnumber2 = event.target.value;
this.$emit('num2change', this.dnumber2)
},
}
}
}
})
</script>
父子双向绑定的原理即通过v-model的基本原理进行双向绑定,input中的初始值由父传子传递,input改变的值由子传父传递从而实现双向绑定。