Vue:自定义v-model数据双向绑定

<template>
    <div>
        <h3>单向绑定数据</h3>
        <p>age: {
        { age }}</p>
        <p>age: <input type="text" :value="age"></p>
        
        <h3>双向绑定数据</h3>
        <p>name: {
        {name}}</p>
        <p>name: <input type="text" :value="name" @input="name=$event.target.value"></p>
    </div>
</template>


<script>
export default {
    data(){
        return {
            age: 23,
            name: "王小二"
        }
    }
}

</script>

1、数据name单向传递给input；

<template>
    <input type="text" :value="age" @input="change($event.target.value)">
</template>


<script>
export default {
    props: ["age"],

    model: {
        prop: "age",     // 对应的变量
        event: "change"  // 触发事件
    }, 

    methods: {
        // 把修改后的值传递回去
        change(value){
            console.log(value)
            this.$emit('change', value)
        }
    }
}

</script>

<template>
    <div>
        <h3>子组件v-model示例</h3>

        <p>age: {
        {age}}</p>

        <p>age: <Child v-model="age"/></p>
    </div>
</template>


<script>
import Child from './child.vue';

export default {
    components: {
        Child
    },

    data(){
        return {
            age: 23,
        }
    }
}

</script>

$ vue serve main.vue

1、父组件给子组件传值
2、子组件值修改，触发事件修改父组件值
3、父组件再将新值传递给了子组件，子组件的接收到父组件变更的值