vue中的.sync修饰符用法及原理分析

 更新时间:2022年04月13日 10:57:36   作者:`、ratel  
这篇文章主要介绍了vue中的.sync修饰符用法及原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

.sync修饰符用法及原理

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。

或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态。

例如

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () {
      console.log(this.$emit('setAge',1234567));
 }

这时子组件触发了父组件的修改函数使父组件的age修改成了1234567

这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync

这时我们可以直接这样写

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }

这里注意我们的事件名称被换成了update:age

  • update:是被固定的也就是vue为我们约定好的名称部分

age是我们要修改的状态的名称,是我们手动配置的,与传入的状态名字对应起来

这样就完成了,是不是感觉简单了很多。

注意事项:

这里我们必须在事件执行名称前加上update:的前缀才能正确触发事件。

.sync修饰符的用法总结

需求描述

最近项目中需要在父子组件中实现数据双向传递的功能。

解决方案

在vue中我们知道props传递的属性只能实现数据的单向流动,如果我们要实现逆向传递的功能一般通过this.$emit()来触发方法来实现,使用.sync修饰符只需要通过this.$emit()来触发属性就能实现。

// 父组件使用 .sync 传递
:page.sync="searchForm.page"
// 子组件使用 'update:' 触发
this.$emit('update:page', data)

注意:在uniapp项目中的某些情况下不能正常使用。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue的插槽原来该这样理解

    vue的插槽原来该这样理解

    这篇文章主要为大家详细介绍了vue的插槽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • Vue路由跳转的4种方式小结

    Vue路由跳转的4种方式小结

    本文主要介绍了Vue路由跳转的4种方式小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue 2.0在IE11中打开项目页面空白的问题解决

    Vue 2.0在IE11中打开项目页面空白的问题解决

    这篇文章主要给大家介绍了关于Vue 2.0在ie 11中打开项目页面空白问题的解决方法,文中详细分析出现该问题的原因,并给出了详细的解决方法,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
    2017-07-07
  • vue2.5.2使用http请求获取静态json数据的实例代码

    vue2.5.2使用http请求获取静态json数据的实例代码

    这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下
    2018-02-02
  • 如何解决.vue文件url引用文件的问题

    如何解决.vue文件url引用文件的问题

    这篇文章主要介绍了解决.vue文件url引用文件的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue实现图片懒加载的方法分析

    vue实现图片懒加载的方法分析

    这篇文章主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • vue3+Element Plus实现自定义穿梭框的详细代码

    vue3+Element Plus实现自定义穿梭框的详细代码

    找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件,本文给大家分享vue3+Element Plus实现自定义穿梭框的示例代码,感兴趣的朋友一起看看吧
    2024-01-01
  • vue3中getCurrentInstance示例讲解

    vue3中getCurrentInstance示例讲解

    这篇文章主要给大家介绍了关于vue3中getCurrentInstance的相关资料,文中还介绍了Vue3中关于getCurrentInstance的大坑,需要的朋友可以参考下
    2023-03-03
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 如何修改el-form-item 的label的字体颜色

    如何修改el-form-item 的label的字体颜色

    这篇文章主要介绍了如何修改el-form-item 的label的字体颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论