Vue 父子组件v-model双向绑定

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>