脚本宝典收集整理的这篇文章主要介绍了Vue3父子组件传参有关sync修饰符的用法详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

单向数据流讲解

单向数据流（堆可以修改，栈不可修改）

我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值

但实际上, 对于修改值, 真正是:基本数据类型不可修改，复杂数据类型不要修改引用地址（栈），它的值可以随便修改

Vue2.x使用

定义事件的形式, 通知父组件修改

也就是最基础的用法: PRops+$emIT

写法:

.sync 和 update: 的使用

父组件传值的时候, 直接在变量后加 .sync;

子组件 this.$emit("update:变量", 实参), 即可修改父组件传递的值;

写法:

父传子, 传递多个数据的简写

如果传递给子组件的值是多个数据, 可以直接把多个数据包含在一个对象中, 借助v-bind;

注意:v-bind.sync=“doc”;

传递给子组件的不是doc对象;

而是对象中的每一个属性.

写法:

采用v-model简写(要求严格)

父组件: v-model, 子组件: 接收的变量必须为value, $emit提交的事件必须为input

写法:

Vue3.x使用

采用 v-model, 相对于2.x, 现在一个组件上可以使用多个v-model, 就是Vue2.x修饰符的用法

普通用法

父组件传递的时候使用v-model, 子组件修改的时候用: emit("uodate: num", 实参)

写法:

简写

当父组件传递给子组件的变量名为: modelValue, 可以采用这种写法

写法:

以上就是Vue3父子组件传参有关sync修饰符的用法详解的详细内容，更多关于Vue3父子组件传参的资料请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的Vue3父子组件传参有关sync修饰符的用法详解全部内容，希望文章能够帮你解决Vue3父子组件传参有关sync修饰符的用法详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。