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的那一步
好了，以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue3动态添加路由,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
最近公司项目有个导出ppt的功能,在使用ppexgen.js一周完成功能之后,这篇文章主要给大家介绍了关于前端vue如何使用pptxgen.js导出PPT的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了实现vue图片缩放方式-拖拽组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章主要介绍了详解vue中点击空白处隐藏div的实现（用指令实现），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下2019-02-02
Vue3.x 自发布以来,凭借其性能的显著提升和更加灵活的组合式 API,已经成为了现代前端开发的重要工具之一,除了基本用法外,Vue3.x 还提供了许多高级功能,本文将和大家一起深入探索Vue3.x中的七大高级用法,需要的朋友可以参考下2024-03-03
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-08-08
今天小编就为大家分享一篇vue.js的简单自动求和计算实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue CLI3中使用compass normalize的方法
这篇文章主要介绍了Vue CLI3中使用compass normalize的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论