父组件:
<div id="epp"> <table border="1" cellspacing="0" cellpadding="0"> <tr> <th colspan="3">父组件数据</th> </tr> <tr> <td>name</td> <td>{{keep}}{{change()}}</td> <td><input type="text" v-model="keep"></td> </tr> <tr> <td>age</td> <td>{{age}}</td> <td><input type="text" v-model="age"></td> </tr> </table> <v-border @chan1="rua" @chan2="rua2" :kp="keep" :ag="age" > </v-border > </div>
子组件:
<template id="son"> <div> <button @click="mson">子组件按钮</button> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th colspan="3">子组件数据</th> </tr> <tr> <td>name</td> <td>{{kp}}</td> <td><input type="text" v-model="kp"></td> </tr> <tr> <td>age</td> <td>{{ag}}</td> <td><input type="text" v-model="ag"></td> </tr> </table> <v-son :gkp="kp" :gag="ag"></v-son> </div> </template>
孙子(其他)组件:
<template id="gson"> <div> <button @click="gchan">孙子组件按钮</button> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th colspan="3">孙子组件数据</th> </tr> <tr> <td>name</td> <td>{{gkp}}</td> <td><input type="text" v-model="gkp"></td> </tr> <tr> <td>age</td> <td>{{gag}}</td> <td><input type="text" v-model="gag"></td> </tr> </table> </div> </template>
JS:
let bus = new Vue(); new Vue({ el:"#epp", data:{ keep:"keepfool", age:"28" }, methods:{ rua(val1){ this.keep=val1; }, rua2(val2){ this.age=val2; }, change(){ bus.$on("shuibian",(val)=> { this.keep=val; }); bus.$on("shuibian2",(val2)=> { this.age=val2; }) } }, components:{ "vBorder":{ props:["kp","ag"], template:"#son", methods:{ mson(){ this.$emit("chan1",this.kp); this.$emit("chan2",this.ag); } }, components:{ "vSon":{ props:["gkp","gag"], template:"#gson", methods:{ gchan(){ bus.$emit("shuibian",this.gkp); bus.$emit("shuibian2",this.gag) } } } } } } })