开发指南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的组合,只是简化了编程而已

       平台推荐上述用法

相关文章
|
9月前
|
JavaScript 前端开发 UED
Vue.js中的父子组件通信:构建交互性和可维护性的组件
Vue.js是一款流行的JavaScript框架,以其组件化的开发方式而著称。在Vue.js中,父子组件通信是实现组件之间交互和数据传递的重要机制。在本博客中,我们将深入研究父子组件通信的概念、用法、传递数据的方式以及如何有效地利用它来构建交互性和可维护性的组件。
48 0
|
1月前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
13 0
|
1月前
|
JavaScript API
Vue3中的父子、子父组件通信
Vue3中的父子、子父组件通信
53 0
|
1月前
|
JavaScript API
Vue3父子组件通讯
Vue3父子组件通讯
47 0
|
1月前
|
JavaScript 前端开发
Vue组件通信应用实践总结
Vue组件通信应用实践总结
60 0
|
7月前
|
JavaScript
Vue基础之组件通信(二)
Vue基础之组件通信(二)
21 0
|
8月前
React-其它内容-Portals 和 React-父子组件通讯-类组件
React-其它内容-Portals 和 React-父子组件通讯-类组件
33 0
|
9月前
|
存储 前端开发
【react从入门到精通】React父子组件通信方式详解(有示例)
在React中,父子组件最常用的4种通信方式: - 通过 props 实现父子组件通信 - 通过 state 实现父子组件通信 - 通过回调函数实现父子组件通信 - 使用 React Context 实现组件通信 在项目实战过程中,可根据实际情况选择最合适的通信方式。
300 0
【react从入门到精通】React父子组件通信方式详解(有示例)
|
9月前
|
JavaScript 索引
【Vue】父子组件通信
【Vue】父子组件通信
【Vue】父子组件通信
|
11月前
|
JavaScript
vue组件通讯的方式
在 Vue 中,组件通讯有多种方式