VUE父子组件之间的传值，以及兄弟组件之间的传值；

一、Vue父子组件之间传值

vue使用中，经常会用到组件，好处是：
1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；
2、页面内容会简洁一些；方便管控；
子组件的传值是通过props来传递数据，$emit来触发事件；
下面是一个简单的子组件props传值：
父组件的部分：

首先引入组件，在组件上绑定你要传给组件的值；

然后，在组件里通过props来接收你从父页面传过来的值；so，父组件把值传给子组件就完成了；
下面是一个子组件在把值传给父组件的例子：
父组件部分：

子组件部分：

先是 c h a n g e 监听 i n p u t 值的变化，通过 change监听input值的变化，通过 change监听input值的变化，通过emit来连接父组件和子组件之间的事件；transferUser是在父组件连接事件的名称，后面跟上返回的数据；然后在父组件通过getUser获取数据,就这样子传父的过程就完成了…

二、兄弟组件之间的传值
兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;
原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；
下面是一个bus实例：

1、创建一个firstChild组件，引入bus,接着一个按绑定数据传输事件：

我们通过一个$emit自定义一个事件，并传递数据；
$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

下面是另一个组件，引入bus实例，通过一个p标签接收数据：

这个组件的mounted里，我们监听了userDefinedEvent事件，并把传递过来的事件通过$on监听回调函数；
o n : 监听当前实例上的自定义事件 ( 此处当前实例为 b u s ) 。事件可以由 on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由 on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

接下来就是展示真正的效果的时候了：

点击之后：

总结:
1，首先创建一个事件总线，例如bus，作为一个通讯的桥梁；
2，在需要传值的组件中，通过 e m i t 触发一个自定义事件，并传递参数； 3 ，在接收数据的组件中，通过 emit触发一个自定义事件，并传递参数； 3，在接收数据的组件中，通过 emit触发一个自定义事件，并传递参数；3，在接收数据的组件中，通过on监听自定义事件，并处理传递过来的参数；

另外：
1、兄弟组件之间与父子组件之间的数据交互，两者相比较，兄弟组件之间的通信其实和子组件向父组件传值有些类似，其实他们的通信原理都是相同的，例如子向父传值也是 e m i t 和 emit和 emit和on的形式，只是没有eventBus，但若我们仔细想想，此时父组件其实就充当了bus这个事件总线的角色。
2、这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理。

VUE父子组件之间的传值，以及兄弟组件之间的传值；相关推荐

React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue 组件间传值、兄弟组件、bus方式 ( 1 分钟看懂 )
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. bus方式的组件间传值其实就是建立一个公共的js文件,专门用来传递消息 1.建立公共文件,并引入新 ...
vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信一.父组件传值给子组件父组件 ...
Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
vue组件通信v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置父组件关键代码如下: 1 <tem ...
VUE3+TS（父子、兄弟组件通信）
目录父传子值.方法(子调用父值.方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值.方法) 兄弟(任意组件)通信引入Mitt来完成任意组件通信父传子值.方法(子调用父值.方法) 1.统 ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...

VUE父子组件之间的传值，以及兄弟组件之间的传值；

VUE父子组件之间的传值，以及兄弟组件之间的传值；相关推荐

最新文章

热门文章