Vue组件化之父子组件之间的双向绑定

例如子组件里有input，想实现子组件props里的属性和value值实现双向绑定，可以在子组件中添加一个data或computed属性来代替props中的属性，然后实现绑定。

//如果不改变父组件的值
<div>
    <cpn :cmessage="message">
</div>
<template>
    <h2>{
    
    {
    
    cmessage}}</h2>
	<input type="text" v-model="dmessage">
</template>
components:{
    
    
    cpn:{
    
    
        props:{
    
    
            cmessage:String;
        },
        data(){
    
    
			dmessage:this.cmessage
        }
    }
}

//如果想改变父组件的值
<div>
    <cpn :cmessage="message" @meschange="mchange">
</div>
<template>
    <h2>{
    
    {
    
    cmessage}}</h2>
	<input type="text" :value="dmessage" @input="mesInput">  //结合双向绑定的本质
    <input type="text" v-model="dmessage"> //然后组件里用watch监听dmessage，效果一样 
</template>
components:{
    
    
    cpn:{
    
    
        template:``,
        props:{
    
    
            cmessage:String;
        },
        data(){
    
    
			dmessage:this.cmessage
        },
        methods:{
    
    
            mesInput(event){
    
    
                this.dmessage=event.target.value;
                this.$emit('meschange',this.dmessage)
            }
        }
    }
}
const app = new Vue({
    
    
    el:'#app',
    data:{
    
    
        message:''
    },
    methods:{
    
    
        mchange(newvalue){
    
    
			this.message = newvalue;
        }
    }
})