<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子孙相互通信</title>
<style>
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<body>
<section id="app">
<table border="1" cellspacing="0" width="600px">
<tr>
<th colspan="3">父亲的数据</th>
</tr>
<tr>
<td>name</td>
<td>{{name}}</td>
<td><input type="text" v-model="name"></td>
</tr>
<tr>
<td>age</td>
<td>{{age}}</td>
<td><input type="text" v-model="age"></td>
</tr>
</table>
<v-Child :fn="name" :fa="age" @childbyvalue="childByValue"></v-Child>
</section>
<template id="child">
<div>
<button @click="change">子传父</button>
<table border="1" cellspacing="0" width="600px">
<tr>
<th colspan="3">儿子的数据</th>
</tr>
<tr>
<td>Myname</td>
<td>{{cn}}</td>
<td><input type="text" v-model="cn"></td>
</tr>
<tr>
<td>Myage</td>
<td>{{ca}}</td>
<td><input type="text" v-model="ca"></td>
</tr>
</table>
<v-son :sn="cn" :sa="ca"></v-son>
</div>
</template>
<template id="son">
<div>
<button @click="sonchange">孙子传父</button>
<table border="1" cellspacing="0" width="600px">
<tr>
<th colspan="3">孙子的数据</th>
</tr>
<tr>
<td>Myname</td>
<td>{{wn}}</td>
<td><input type="text" v-model="wn"></td>
</tr>
<tr>
<td>Myage</td>
<td>{{wa}}</td>
<td><input type="text" v-model="wa"></td>
</tr>
</table>
</div>
</template>
</body>
<script>
let app1=new Vue({}) // 过度
let app = new Vue({
// el: "#app",
data: {
name: "father",
age: 20
},
methods: {
childByValue(childValue) {
this.name = childValue.cname
this.age = childValue.cage
},
},
mounted(){
let that=this
app1.$on("sonbyvalue",function (val) { //获取页面中数据 绑定
that.name=val.cname
that.age=val.cage
})
},
components: {
"vChild": {
props: ["fn", "fa"], //接收数据
template: "#child",
data: function () { //每接收一个，返回一次，时时更新
return {
cn: this.fn,
ca: this.fa
}
},
watch: { //监听 数据改变
fn: function () {
this.cn = this.fn;
},
fa: function () {
this.ca = this.fa;
}
},
methods: {
change() {
let obj = { //数据写入对象
cname: this.cn,
cage: this.ca
}
this.$emit("childbyvalue", obj) //触发 发送数据
}
},
components: {
"vSon": {
props: ["sn", "sa"], //接收数据
template: "#son",
methods:{
sonchange(){
let obj1={ //数据写入对象
cname: this.wn,
cage:this.wa
}
app1.$emit("sonbyvalue",obj1) //触发 发送数据
}
},
data: function () { //时时更新接收数据
return {
wn: this.sn,
wa: this.sa
}
},
watch: { //监听 数据改变
sn: function () {
this.wn = this.sn;
},
sa: function () {
this.wa = this.sa;
}
}
}
}
}
}
}).$mount('#app')
</script>
</html>