Vue 父子组件双向绑定
1、父组件
<template>
<div>
<model-son v-model="fatherMsg"></model-son>
<br>
父组件:{{fatherMsg}}
<button @click="modelFatherUpdate">父组件来点击改变</button>
</div>
</template>
<script>
import modelSon from './modelSon'
export default {
name: 'modelFather',
components:{
modelSon
},
data () {
return {
fatherMsg:'父组件一开始定义的fatherMsg'
}
},
methods:{
modelFatherUpdate (){
this.fatherMsg = 'fatherMsg被父组件改变'
}
}
}
</script>
2、子组件
<template>
<div>
子组件的msg:{{msg}}
<button @click="modelUpdate">点击改变</button>
</div>
</template>
<script>
export default {
name: 'modelSon',
model: {
prop: 'msg',
event: 'change'
},
props:{
msg:String
},
methods:{
modelUpdate (){
this.$emit('change','msg被子组件改变了!')
}
}
}
</script>