Vue3父子组件传参有关sync修饰符的用法详解
更新时间：2021年09月24日 09:02:50 作者：SpringSir
这篇文章主要给大家介绍关于前端Vue3父子组件传参有关sync修饰符的用法详细解析，有需要的朋友可以借鉴参考下，希望能够有所帮助
单向数据流讲解
单向数据流（堆可以修改，栈不可修改）
我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值
但实际上, 对于修改值, 真正是:基本数据类型不可修改，复杂数据类型不要修改引用地址（栈），它的值可以随便修改
Vue2.x使用
定义事件的形式, 通知父组件修改
也就是最基础的用法: props+$emit
写法:
.sync 和 update: 的使用
父组件传值的时候, 直接在变量后加 .sync;
子组件 this.$emit("update:变量", 实参), 即可修改父组件传递的值;
写法:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZtIWKTt-1631881175196)(现在整理的面试题.assets/image-20210917190128935.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839424.jpg)
父传子, 传递多个数据的简写
如果传递给子组件的值是多个数据, 可以直接把多个数据包含在一个对象中, 借助v-bind;
注意:v-bind.sync=“doc”;
传递给子组件的不是doc对象;
而是对象中的每一个属性.
写法:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3yidmVZ0-1631881175197)(现在整理的面试题.assets/image-20210917191523433.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839425.jpg)
采用v-model简写(要求严格)
父组件: v-model, 子组件: 接收的变量必须为value, $emit提交的事件必须为input
写法:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GT15QqZz-1631881175199)(现在整理的面试题.assets/image-20210917201832481.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839426.jpg)
Vue3.x使用
采用 v-model, 相对于2.x, 现在一个组件上可以使用多个v-model, 就是Vue2.x修饰符的用法
普通用法
父组件传递的时候使用v-model, 子组件修改的时候用: emit("uodate: num", 实参)
写法:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vQ1lQFal-1631881175199)(现在整理的面试题.assets/image-20210917193019726.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839427.jpg)
简写
当父组件传递给子组件的变量名为: modelValue, 可以采用这种写法
写法:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4513r0bT-1631881175200)(现在整理的面试题.assets/image-20210917194125901.jpg)]](http://img.jbzj.com/file_images/article/202109/202109240839428.jpg)
以上就是Vue3父子组件传参有关sync修饰符的用法详解的详细内容，更多关于Vue3父子组件传参的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vite打包优化分片打包依赖包,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue filter 过滤当前时间 实现实时更新效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue数组动态刷新失败问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了解决ant-design-vue安装报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了element-ui中el-table不显示数据的问题解决,这是最近在做列表首页时遇到的一个问题,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了UNIapp实现局域网内在线升级的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要介绍了vue通过style或者class改变样式的实例代码，在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下2018-10-10
今天小编就为大家分享一篇vue单页面应用打开新窗口显示跳转页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。这篇文章主要介绍了vue3 setup() 高级用法,需要的朋友可以参考下2021-11-11
最新评论