Vue中的父子组件传值.sync

更新时间：2023年12月20日 16:36:28 作者：小晨想好好学习

这篇文章主要介绍了Vue中的父子组件传值.sync,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue父子组件传值.sync

传统的父子组件之间传值

父组件通过 :变量=“xxx”将值传给子组件

子组件通过props进行接收

但是子组件只有读的属性，不可以对数据进行更改，所以$emit传回父组件，由父组件对数据进行修改

//父组件
<template>
  <div class="content">
     <btn :btnName='num' @changeFn= changeFn></btn>
  </div>
</template>

子组件
export default {
  name: 'btn',
  props: {
    btnName:{
        type : [String,Number],
        required: true
    }
  },
  methods: {
      changeNum(){
          this.$emit('changeFn',888)
      }
  },
}

.sync相当于上面的父子组件传值简写

父子双向传值语法糖

父组件在传入子组件的数据后加上.sync 不需要在对子组件的$emit进行接收

<template>
  <div class="content">
     <btn :btnName.sync='num' ></btn>
  </div>
</template>

子组件$emit传回的不再是函数而是 update:父组件传过来的变量名称

<script>
export default {
  name: 'btn',
  props: {
    btnName:{
        type : [String,Number],
        required: true
    }
  },
  methods: {
      changeNum(){
          this.$emit('update:btnName',888)
      }
  },
}
</script>

总的来说

.sync 使得父组件少走了处理 $emit的那一步

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

您可能感兴趣的文章:

VUE中filters过滤器的两种用法实例
vue中过滤器的作用可被用于一些常见的文本格式化,也就是修饰文本,但是文本内容不会改变,下面这篇文章主要给大家介绍了关于VUE中filters过滤器的两种用法,需要的朋友可以参考下
2022-04-04
Vue中的文字换行问题
这篇文章主要介绍了Vue中的文字换行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue实现跳转接口push 转场动画示例
今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue CLI4 Vue.config.js标准配置(最全注释)
这篇文章主要介绍了Vue CLI4 Vue.config.js标准配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
详解vue移动端项目的适配(以mint-ui为例)
这篇文章主要介绍了详解vue移动端项目的适配(以mint-ui为例)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
基于electron+vue3+ts搭建桌面端应用并且可以热更新
这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下
2023-10-10
Vue项目实现token无感刷新的示例代码
最近在使用系统的过程中，业务人员反馈刚登录一会就提示token过期需要重新登录，所以本文为大家分享一个无感刷新的实现代码，需要的可以参考下
2023-07-07
你知道Vue中神奇的$set是如何实现的吗?
在日常开发中，$set的也是一个非常实用的API。但是我们知其然更要知其所以然，接下来就跟随小编一起看一下Vue中的$set是如何实现的吧
2022-12-12
vue 项目常用加载器及配置详解
本文介绍了vue 项目常用加载器及配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue使用ECharts实现折线图和饼图
这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09