您好,欢迎来到华佗健康网。
搜索
您的当前位置:首页Vue中的修饰符 .sync详解

Vue中的修饰符 .sync详解

来源:华佗健康网

一、.sync修饰符的介绍

从2.3.0版本起,Vue重新引入了 .sync修饰符。实现了父子组件数据之间的双向绑定 , 与v-model类似 . 一般的应用场景就是 在父组件data定义了一个变量 , 我们希望可以在子组件中修改他

二 、.sync修饰符的使用

  • 不使用 .sync实现父子数据绑定


// 在子组件中
<MySon>

methods:{
// 通过触发自定义事件来传递
this.$emit('setAge',23)

}

</MySon>

// 父组件中

<MyFather :age="age" @setAge="res => age = res">
</MyFather>  // 在父组件中通过监听自定义事件来修改数据
  • 使用 .sync实现父子数据绑定
<MyFather :age.sync="age">
</MyFather>

// 等价于

<MyFather :age="age" @update:age="res => age = res">
</MyFather>

// 相当于多了一个事件监听 , 事件名是update:age , 回调函数中, 会把接收的值赋值给属性绑定的数据项中

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

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

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.com 版权所有 湘ICP备2023021991号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务