vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue修饰符v-model .sync

vue修饰符v-model及.sync原理及区别详解

作者:佑子呀

这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

v-model的原理

    <!--v-model写法-->
    <my-component type="text" v-model="num">
    <!--展开语法糖后的写法-->
    <my-component type="text"
      :value="num"
      @input="(value) => num = value"
    >

父组件通过向子组件传值和自定义事件,子组件里面通过$emit去触发input事件

// 在子组件中
<template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('input',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

.sync的原理

// 在父组件中
    <my-component :value.sync="num" />
// 子组件中
    <template lang="">
    <div>
        <div>{{ num }}</div>
        <button @click="$emit('update:value',num + 1)"></button>
    </div>
</template>
<script>
export default {
    props:{
        num:{
            type: Number,
            required: true
        }
    }
}

两者本质都是一样,并没有任何区别: “监听一个触发事件”="(val) => value = val"。

v-model和.sync修饰符的区别

.sync与v-model区别是

相同点:都是语法糖,都可以实现父子组件中的数据的双向通信。

区别点:

只不过v-model默认对应的是input或者textarea等组件的input事件,如果在子组件替换这个input事件,其本质和.sync修饰符一模一样。比较单一,不能有多个。

// 子组件可以用自定义事件,来替换v-model默认对应的原生input事件,只不过我们需要在子组件手动 $emit
model: {
        prop: "value",
        event: "update"
},

一个组件可以多个属性用.sync修饰符,可以同时"双向绑定多个“prop”,而并不像v-model那样,一个组件只能有一个。

因为使用v-model,子组件中只能触发一个input事件,事件名是唯一的,而.sync修饰符,它触发的时间名是updata:属性名,所以它有多个事件名,就可以使用多次

总结作用场景:

其实语法糖只是在父组件用的时候更加方便,而子组件该咋样还是咋样。

以上就是vue修饰符v-model及.sync原理及区别详解的详细内容,更多关于vue修饰符v-model .sync的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文