Vue学习— .sync和v-model的异同

参考：https://juejin.cn/post/6844904135892926478

 

使用场景

父组件传递的属性子组件想同步修改

v-model

习惯上表单元素用v-model

注意： 发现子组件的props只能是value,子组件发射事件名为input

V-model等同于:value+@input事件的结合

父组件：
 <div class="item">
      modelValue:{{ modelValueF }}
      <demo-model :value="modelValueF" @input="val => (modelValueF = val)"></demo-model>
            <!-- 缩写 -->
      <demo-model v-model="modelValueF"></demo-model>
</div>


子组件：
<template>
    <div><input :value="value" @input="change2" />{{ value }}</div>
</template>

<script>
export default {
    name: 'Demo2Model',
    props: {
        value: {
            type: String
        }
    },
    methods: {
        change2(e) {
            let v = e.target.value
            this.$emit('input', v)
        }
    }
}
</script>

<style lang="scss"></style>

 

.sync

sync修饰符的控制能力都在父级，事件名称也相对固定update:xx

父组件 
<div class="item">
            asyncValue:{{ asyncValueF }}
            <demo-async :async-value="asyncValueF" @update:asyncValue="val => (asyncValueF = val)"></demo-async>
            <!-- 缩写 -->
            <demo-async :async-value.sync="asyncValueF"></demo-async>
</div>



子组件：
<template>
    <div><input :value="asyncValue" @input="change1" />{{ asyncValue }}</div>
</template>

<script>
export default {
    name: 'Demo2Async',
    props: {
        asyncValue: {
            type: String
        }
    },
    methods: {
        change1(e) {
            let v = e.target.value
            this.$emit('update:asyncValue', v)
        }
    }
}
</script>

<style lang="scss"></style>

      额外： v-model和.async本质上都是实现双向绑定的语法糖,vue3子组件中自定义实现v-model的方法改为和.sync一致，因此去除.sync，直接用v-model代替。