sync修饰符的原理和作用（Vue高级）

最新推荐文章于 2022-06-07 21:53:13 发布

@乐知者@

最新推荐文章于 2022-06-07 21:53:13 发布

阅读量1.1k

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45663702/article/details/123609225

版权

本文回顾了Vue中父子路由的传值方法，重点介绍了使用函数传值与.sync修饰符的技巧，展示了如何通过`setAge`事件和`update:age`事件进行状态同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实就是语法糖，效果很妙
首先简单复习一下Vue中父子路由传值

// 父组件给子组件传入一个函数
<MyFooter :age='age' @setAge='(res) => age = res' ></MyFooter>

// 子组件通过调用这个函数来实现修改父组件的状态
mounted () {
    console.log(this.$emit('setAge', 123456));
}

用.sync修饰符

// 父组件将age传给子组件并使用.sync修饰符
<MyFooter :age.sync='age' ></MyFooter>

// 子组件触发事件
mounted () {
    console.log(this.$emit('update:age', 1234567));
}

事件名被换成 update:age
update:是被固定的也就是Vue为我们约定好的名称部分
age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来

注意：
必须在执行名称前加上 update: 的前缀才能正确触发事件。