<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<cpn :number1="num1" :number2="num2"
@num1change="num1change" @num2change="num2change"
></cpn>
</div>
<!-- 模板抽离方法 -->
<template id="cpn">
<div>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<!-- <input type="text" v-model="dnumber1"> -->
<input type="text" :value="dnumber1" @input="num1input">
<h2>props:{{number2}}</h2>
<h2>data:{{dnumber2}}</h2>
<!-- <input type="text" v-model="dnumber2"> -->
<input type="text" :value="dnumber2" @input="num2input">
</div>
</template>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 0
},
methods: {
// 子传父的定义操作
num1change(value) {
// 类型转为float类型
this.num1 = parseFloat(value)
},
num2change(value) {
this.num2 = parseFloat(value)
}
},
components: {
cpn:{
template: '#cpn',
props: {
// 不可以直接使用props内的数据来修改子组件的内容，Vue推荐使用其连接父组件，所以需要用data内属性来赋值来进行双向绑定的连接（父传子）
number1: Number,
number2: Number,
},
data() {
return {
dnumber1: this.number1,
dnumber2: this.number2
}
},
methods: {
num1input(event) {
// 需求一：表单与页面数据进行双向绑定，event.target.value获取当前的表单值
this.dnumber1 = event.target.value,
// 需求二：使父组件中的num1，num2也进行修改（子传父）
this.$emit('num1change', this.dnumber1),
// 需求三：表单一数据是表单二的100倍
this.dnumber2 = this.dnumber1 * 100,
this.$emit('num2change', this.dnumber2)
},
num2input(event) {
this.dnumber2 = event.target.value,
this.$emit('num2change', this.dnumber2),
this.dnumber1 = this.dnumber2 / 100,
this.$emit('num1change', this.dnumber1)
}
},
}
},
})
</script>
</body>
</html>
父传子步骤：
1.在子组件使用props定义数据。
2.在使用父组件时使用v-bind给数据赋值。
子传父步骤：
1.在子组件函数内使用this.$emit()方法发射数据。
2.在父组件定义发送过来的函数及使用其数据。
