父子组件实现数据互通
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<cpn :cnum1="num1" :cnum2="num2" @haha="hehe"></cpn>
</div>
<script src="../vue.js"></script>
<template id="cpn">
<div>
<h2>{{dnum1}}</h2>
<!-- <input type="text" v-model="dnum1">-->
<!-- 第二种方式，使用原始的绑定原理-->
<input type="text" :value="dnum1" @input="inputnum1">
</div>
</template>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
num1: 1,
num2: 2
},
methods: {
hehe(value){
console.log(value)
}
},
components: {
cpn:{
template: '#cpn',
props: {
cnum1:{
type: Number
},
cnum2: {
type: Number
}
},
data(){
return {
dnum1: this.cnum1,
dnum2: this.cnum2
}
},
methods: {
inputnum1(event) {
this.dnum1 = event.target.value;
this.$emit('haha',this.dnum1)
}
}
}
}
})
</script>
</body>
</html>
因为跨父子组件了，双向绑定不能通过v-model改props，只能手动处理了。
- 学会使用htis.$emit() 向父组件传递数据。