vue父子组件传值方式,vue3.0父子组件传值

　　本文主要介绍了前端Vue3亲子组件sync修饰符的用法的详细分析。有需要的朋友可以借鉴一下，希望能有所帮助。

目录

　　单向数据流说明Vue2.x采用定义事件的形式，通知父组件修改。同步和更新：通过使用父节点，并且传输多个数据的缩写是v-model缩写(strict)。Vue3.x使用常见用法缩写。

单向数据流讲解

　　单向数据流(堆可以修改，栈不能)

　　众所周知，从父组件传递到子组件的数据是单向数据流，即父组件传递的值不能被子组件直接修改。

　　但实际上，对于修改的值，基本数据类型不能修改是真的，复杂数据类型也不应该修改引用地址(栈)，其值可以随意修改。

Vue2.x使用

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

　　这是最基本的用法：props $emit

　　写作：

.sync 和 update: 的使用

　　当父组件传递值时，添加。变量后直接同步；

　　组成这个。$emit(update: variable ，argument)可以修改父组件传递的值；

　　写作：

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

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

　　注意：v-v-bind . sync=" doc "；

　　doc对象未传递给子组件；

　　但是对象中的每个属性。

　　写作：

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

　　父组件：v-model，子组件：接收的变量必须是value，必须输入$ emit提交的事件。

　　写作：

Vue3.x使用

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

普通用法

　　当传递父组件时，使用v-model，当修改子组件时，使用emit(uodate: num ，argument)。

　　写作：

简写

　　当父组件传递给子组件的变量名为：modelValue时，可以使用这个。

　　写作：

　　以上是Vue3亲子组件参考中sync修饰符用法的详细说明。更多关于Vue3亲子组件参考的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。