vue 修饰符 .sync

最新推荐文章于 2024-06-25 01:45:07 发布

w-somebody

最新推荐文章于 2024-06-25 01:45:07 发布

阅读量404

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_37600506/article/details/129685554

版权

.sync修饰符在Vue的版本迭代中起着作用，它作为语法糖用于简化父子组件间prop的更新通信。在Vue2.3.0以后，.sync被重新引入，允许子组件通过$emit(update:prop,value)来更新父组件的绑定值，类似于v-model的效果。文章通过一个例子展示了如何在父组件和子组件中使用.sync进行数据同步。

摘要由CSDN通过智能技术生成

.sync 修饰符最先出现在 vue1.0 中，vue2.0 移除，后续在实际项目中发现这个修饰符还是有可使用的地方。因此在 vue2.3.0 时重新引入 .sync，作为一个语法糖。

:prop.sync=“val” 是 :prop=“val” 与 @update:prop=“val => prop = val” 的语法糖
例如： < Child :id.sync=“userId” / > 是 < Child :id=“userId” @update:id=“val => userId = val” / > 的语法糖

// 父组件 parent.vue
<template>
    <div>
        <Child :id.sync="userId" />
    </div>
</template>

<script>
import Child from './child.vue'
export default {
    name: 'parent',
    componnets: { Child },
    data() {
        return {
            userId: 1
        }
    }
}
</script>

当子组件需要更新 id 的值时

// 子组件 child.vue
<template>
    <div>
        <p>{{ id }}</p>
        <button @click="add">id 加 1<button>
    </div>
</template>

<script>
export default{
    name: 'child',
    props: {id: Number},
    methods: {
        add(){
            let res = this.id + 1
            this.$emit('update:id', res)
        }
    }
}
</script>