父组件
<template>
<div id="fat">
<input type="text" v-model="fatherValue" />
<!--子传父事件，父传子props-->
<son @fatAct="sonAct" :fatVal="fatherValue"></son>
</div>
</template>
<script>
// 引入子组件
import Son from './Son'
export default {
components:{
Son
},
data(){
return {
fatherValue:''
}
},
methods:{
fatAct: function (childValue) {
// childValue就是子组件传过来的值
this.fatherValue = childValue
}
}
}
</script>
<style></style>
子组件
<template>
<div id="son">
<input type="text" v-model="sonValue" />
</div>
</template>
<script>
export default {
props:{
fatherValue:{
type:String,
default:function(){
return ''
}
}
},
computed:{
sonValue:{
get:function(){
return this.fatherValue
},
set:function(value){
this.$emit("sonAct",value);
}
}
}
};
</script>
<style></style>
