vue中的v-model和sync

v-model语法糖和sync修饰符

最初的写法

<!--父组件-->
<template>
    <hello-world :value="msg" @input="(value)=>msg=value"></hello-world>
</template>    
<script>
export default{
    data(){ return{ msg: 'woshishui' } }
}
</script>

<!-- 子组件 -->
<template>
    <div>
        <div>msg的值: {{ value }}</div>
        <div @click="msgChange">更改msg的值</div>
    </div>
</template> 
<script>
export default{
    props:{
        value: String
    },
    methods:{
        msgChange(){
            this.$emit('input','哈哈哈')
        }
    }
}
</script>

v-model主要做了哪些事?

v-model这个双向绑定相当于做了两个操作：

• （1）给当前这个组件添加了一个value属性
• （2）给当前这个组件绑定了一个input事件；

<!--父组件-->
<template>
    <hello-world v-model="msg"></hello-world>
</template>    
<script>
export default{
    data(){ return{ msg: 'woshishui' } }
}
</script>

<!-- 子组件 -->
<template>
    <div>
        <div>msg的值: {{ value }}</div>
        <div @click="msgChange">更改msg的值</div>
    </div>
</template> 
<script>
export default{
    props:{
        value: String
    },
    methods:{
        msgChange(){
            this.$emit('input','哈哈哈')
        }
    }
}
</script>

通过model修改value和事件名

<!--父组件-->
<template>
    <hello-world v-model="msg"></hello-world>
</template>    
<script>
export default{
    data(){ return{ msg: 'woshishui' } }
}
</script>

<!-- 子组件 -->
<template>
    <div>
        <div>msg的值: {{ msgParent }}</div>
        <div @click="msgChange">更改msg的值</div>
    </div>
</template> 
<script>
export default{
    props:{
        msgParent: String
    },
    model:{
        prop: 'msgParent',        // 绑定prop传递的值
        event: 'msgChange'        // 定义触发事件名称
    },
    methods:{
        msgChange(){
            this.$emit('msgChange','哈哈哈')
        }
    }
}
</script>

sync修饰符

<!--父组件-->
<template>
    <hello-world :msg.sync="msg" :money.sync="money"></hello-world>
</template>    
<script>
export default{
    data(){ return{ msg: 'woshishui',money:100 } }
}
</script>

<!-- 子组件 -->
<template>
    <div>
        <div>msg的值: {{ msgParent }}</div>
        <div @click="msgChange">更改msg的值</div>
        <br/>
        <div>msg的值: {{ money }}</div>
        <div @click="moneyChange">更改money的值</div>
    </div>
</template> 
<script>
export default{
    props:{
        msg: String,
        money: Number,
    },
    methods:{
        msgChange(){
            this.$emit('update:msg','哈哈哈')
        },
        moneyChange(){
            this.$emit('update:money',200)
        }
    }
}
</script>

v-model和.sync的区别

• v-model: 局限性只能传递一个属性, 如果只有一个 可以使用v-model
• sync: 能传递多个属性,多个依然需要使用.sync