【vue】父子组件数据双向绑定 v-model 和 sync

在线演示代码

• v-model 语法糖

v-model 是官方封装的指令，实现了父子组件的双向数据绑定，其实是官方提供的语法糖果

<input v-model="iptVal"/> 
// 等价于
<input v-bind:value="iptVal" v-on:input="iptVal = $event.target.value"/>
// 即
<input :value="iptVal" @input="iptVal = $event.target.value"/>
// 绑定iptVal参数给子组件，通过监听input事件，把value赋值给iptVal

$event 在内敛语句处理器中访问原始的DOM事件，可以获取特殊变量$event

• 在自定义组件中使用v-model

两种处理方法

1. 老版本

<!-- 自定义zInput组件 -->
<template>
    <input type="text" v-model="val" @input="iptInput"/>
</template>

<script>
    export default {
        name: "zInputOne",
        props: {
            value: String  //在props接受父组件传递数据
        },
        data(){
            return {
                val: this.value  // 内部值和value进行关联
            }
        },
        watch: {
            value(val){    // 监听父组件传递数据，更新内部值
                this.val = val 
            }
        },
        methods: {
            iptInput(){
                // 通过$emit触发input事件，将内部值传递给给父组件
                this.$emit('input', this.val)
            }
        }
    }
</script>

2. v2.2.0+ 新增 model通过model属性实现

<template>
    <input type="text" v-model="val" @input="iptInput"/>
</template>

<script>
    export default {
        name: "zInputTwo",
        model: {  // 定义model
            prop: 'value',  // 绑定prop传递的值
            event: 'input'  // 定义触发事件名称
        },
        props: {
            value: String    // 接受父组件传递的值
        },
        data(){
            return {
                val: this.value    // 关联值
            }
        },
        methods: {
            iptInput(){ 
                // 通过$emit触发input（model内定义）事件，将内部值传递给给父组件
                this.$emit('input', this.val)
            }
        }
    }
</script>

第一种实现方式弊端：只能通过定义value和触发input
第二种实现方式：可以接受任意变量，触发任意自定义事件

• sync修饰符（v2.3.0+ 新增）

<template>
    <input type="text" v-model="val" @input="iptInput">
</template>

<script>
    export default {
        name: "syncAndUpdate",
        props: {
            value: String
        },
        data(){
            return {
                val: this.value    // 关联值
            }
        },
        methods: {
            iptInput(){
                // 通过触发update:value 触发事件，将值传给父组件
                this.$emit('update:value', this.val)
            }
        }
    }
</script>
<!-- 使用 -->
<sync-and-update :value.sync="thirdValue"></sync-and-update>

sync实现的好处，可是定义多个值，进行父子组件的数据绑定。