开发指南025-VUE2下父子数据交换

简介: 传递分单向、双向

一、单向传递

1、父通过参数调用子,单项传递。

     在子组件里通过props定义参数,例如props:["para1","para2"],父组件里用:para1="value1" :para2="value2"传递参数。

    平台推荐上述用法

2、父通过$refs取得子的数据

     父给子起名: ref="child1"

     父取值:this.$refs.child1.数据

     平台推荐上述用法

     父可以直接通过上述方法给子赋值,平台不推荐该方法,这种需求请用1方式解决。

3、子调用父的函数,执行操作,并传递参数。

     父将函数名字传给子: @ondo="fun"

     子调用父 this.$emit("ondo",参数1,参数2)

     平台推荐上述用法

4、子通过$parent.直接调用父方法

     this.$parent.fun

     平台不推荐该方法

二、双向传递

   1、v-model方式

    底层录入控件常采用这种方式

   子组件在props里定义 "value" 参数

   父组件通过 v-model传递传入参数

   子组件通过this.$emit("input",值)返回

   平台推荐上述用法

  2、sync方式

       父通过.sync传值,例如:visible.sync

       子通过props接收参数

       子通过this.$emit("update:参数",值)回传

       这种方式本质上是单项传递中1、3的组合,只是简化了编程而已

       平台推荐上述用法

相关文章
|
4月前
|
JavaScript
关于Vue非父子组件通信遇到的细节问题
本文讨论了Vue中非父子组件通信的一个细节问题,即当使用事件总线($eventsBus)进行通信时,需要确保两个组件能够同时在页面上显示,否则可能无法正确触发和监听事件。作者通过组件A和B的例子说明了这一点,并指出解决方案是在一个共同的父组件C中监听事件。
24 1
关于Vue非父子组件通信遇到的细节问题
|
3月前
|
存储 消息中间件 JavaScript
Vue3 多种组件通讯方法
【10月更文挑战第6天】
|
3月前
|
存储
Vue3组件通讯六种方式
【10月更文挑战第3天】
31 3
|
5月前
|
存储 JavaScript API
Vue3组件通讯六种方式
Vue3组件通讯六种方式
193 68
|
4月前
|
JavaScript
Vue3基础(23)___vue3非父子组件之间的通信
本文介绍了Vue 3中非父子组件间通信的方法,通过创建一个事件集合对象和相应的触发监听函数,实现跨组件的事件传递和监听。
66 0
|
存储 缓存 JavaScript
Vue 组件数据通信方案总结
Vue 组件数据通信方案总结
68 0
|
8月前
|
JavaScript API
Vue3中的父子、子父组件通信
Vue3中的父子、子父组件通信
87 0
|
8月前
|
JavaScript API
Vue3父子组件通讯
Vue3父子组件通讯
88 0
|
8月前
|
JavaScript 前端开发
Vue组件通信应用实践总结
Vue组件通信应用实践总结
82 0
|
JavaScript
Vue基础之组件通信(二)
Vue基础之组件通信(二)
50 0