vue父子之間通訊
阿新 • • 發佈:2018-12-13
父元素改變時,實時改變子元素,子元素通過按鈕改變父元素
實際效果圖如下:
html:
<!--父元件--> <div id="app"> <table border="1" cellpadding="0" cellspacing="0"> <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-son :son-name="name" :son-age="age" @sonc="sonf" @sont="sons"></v-son> </div> <!--子元件--> <template id="son"> <div> <button @click="mson">子元件按鈕</button> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th colspan="3">子元件資料{{sonMsg}}</th> </tr> <tr> <td>name</td> <td>{{sonName}}</td> <td><input type="text" v-model="sonName"></td> </tr> <tr> <td>age</td> <td>{{sonAge}}</td> <td><input type="text" v-model="sonAge"></td> </tr> </table> </div> </template>
js.
//建立一個vue例項 new Vue({ el:"#app", data:{ name:"father", age:"28" }, methods:{ sonf(val){ this.name=val; }, sons(val){ this.age=val; } }, components:{ "vSon":{ template:'#son', props:["sonName","sonAge"], data(){ return{ sonMsg:'這是兒子的資料', } }, methods:{ mson(){ this.$emit("sonc",this.sonName); this.$emit("sont",this.sonAge); } } } } })