vue父子组件的双向绑定

父组件可以向子组件传值，修改。同时，子组件也可以向父组件传值和修改

父组件的分析：父组件使用v-model实现双向绑定。

//父组件
<template>
    <div>
        <div class="test">
            测试主页面
            <chldren1 v-model="msg"></chldren1>
            <p>父组件该的值{{msg}}</p>
            <button @click="fn">父组件该的值</button>
        </div>
          <Navgation></Navgation>
    </div>
</template>
<script>
import chldren1 from './children/index'
import Navgation from '@/components/Navigation'
export default {
    data(){
        return{
            msg:1
        }
    },
    methods: {
        fn(){
            this.msg+=1
        }
    },
    components:{
        Navgation,
        chldren1
    }
    
}
</script>
<style lang="less" scoped>
    .test{
        font-size: 16px;
    }
</style>

子组件的第一种方法：
子组件的第一种方法分析：子组件使用关键属性有
必须接一个对象，这什么类型是和父组件传过来的值的类型有关的
在model中定义prop和event属性，它们分别是传过来的值和触发父组件的事件
但我们不需要再父组件中定义触发的事件

props:{
msg:Number //必须接一个对象，这什么类型是和父组件传过来的值的类型有关的
},
 model:{
        prop:"msg",
        event:"fn2"
    },

<template>
    <div>
        <div><span>组件的值:</span>{{msg}}</div>
        <button @click="fn1">子组件主动要求改变</button>
    </div>
</template>
<script>
export default {
    props:{
        msg:Number
    },
    model:{
        prop:"msg",
        event:"fn2"
    },
    
    methods: {
        fn1(){
            this.$emit('fn2',this.msg+1)
        }
    },
}
</script>

子组件的第二种方法：
这里必须使用value
this.$emit('input',this.value+1)中一定使用'input'

 value:{
            default:''
        }


..................
 fn1(){
            // this.$emit('fn2',this.msg+1)
            this.$emit('input',this.value+1)
        }
   

<template>
    <div>
        <!-- <div><span>组件的值:</span>{{msg}}</div> -->
        <div><span>组件的值:</span>{{value}}</div>
        <button @click="fn1">子组件主动要求改变</button>
    </div>
</template>
<script>
export default {
    props:{
        // msg:Number
        value:{
            default:''
        }
    },
    // model:{
    //     prop:"msg",
    //     event:"fn2"
    // },
    
    methods: {
        fn1(){
            // this.$emit('fn2',this.msg+1)
            this.$emit('input',this.value+1)
        }
    },
}
</script>