父元素改变时,实时改变子元素,子元素通过按钮改变父元素
实际效果图如下:
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);
}
}
}
}
})