Vue组件通信中非父子组件传值知识点总结

前言：

如果想要了解非父子关系的组件传值，最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路。

因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式。

这是我总结的父子传值相关的知识，可供参考:  https://www.jb51.net/article/121806.htm

然后大概回顾一下父子传值的过程:

根据上述信息可知，如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据。

那么如果有这样一个组件，既可以帮你传递数据，又可以帮你接收数据该多好啊？

于是乎，一个叫事件总线的概念出现了，它就可以帮助实现你想要的这些功能。

了解事件总线之前，需要先看下两个重要的方法。

前置知识: 

1. $emit(event, data)方法

event: 触发的事件类型

data: 触发这个事件时传递的参数

2. $on(event, callBack(data))方法

event: 绑定的事件类型

callBack: 绑定的这个事件所对应的回调函数，其默认的第一个参数data是使用$emit触发这个事件时所传递的参数

在了解了这两个方法后，再来看下面的这张图：

如果还是不太明白，那就转换成代码在分析一下：

首先，定义一个eventBus:

// eventBus.js
// 事件总线： 只需要导出一个Vue实例即可
import Vue from 'vue'
export default new Vue()

然后，在A组件中导入eventBus, 并触发自定义的AtoB事件

// A.vue// 导入eventBus
import eventBus from "./eventBus"

// 触发事件并传递参数
eventBus.$emit("AtoB", "Data_A")

最后，在B组件中导入eventBus，并监听自定义的AtoB事件

// B.vue// 导入eventBus
import eventBus from "./eventBus"

// 触发事件并传递参数
eventBus.$on("AtoB", data =>{
  console.log(data); // "Data_A"
})

总结：

要想了解非父子传值必先了解父子间的传值非父子传值的核心在于通过事件总线作为一个中介然后通过在“传递值”的组件中触发事件总线的某个自定义的事件来传递一个值(如果是多个值，可以传递一个对象) 最后在“接收值”的组件中来监听事件总线中你触发的那个自定义事件来接收数据

以上就是本次介绍的全部相关知识点，感谢大家的学习和对我们的支持。

赞 (0)

相关推荐

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引

  • vue.js单文件组件中非父子组件的传值实例

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官网中说明如下: 非父子组件通信: 有时候两个组件也需要通信 (非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue(): // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中

  • Vue组件通信中非父子组件传值知识点总结

    前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是我总结的父子传值相关的知识,可供参考:  https://www.jb51.net/article/121806.htm 然后大概回顾一下父子传值的过程: 根据上述信息可知,如果两个组件需要传递值那么需要这两个组件之间是父子关系才能传递数据. 那么如果有这样一个组件,既可以帮你传递数据,又可以帮你接

  • vue 进阶之实现父子组件间的传值

    本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

  • Vue从TodoList中学父子组件通信

    Vue从TodoList中学父子组件通信

    简单的 TodoList 实现一个简单的 todolist,当我输入内容后,点击提交自动添加在下面,如下图所示: 用代码实现这个效果: <div id="app"> <input type="text" v-model="inputVal"> <button v-on:click="clickBtn">提交</button> <ul> <li v-for=&qu

  • vue单页开发父子组件传值思路详解

    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • Vue使用.sync 实现父子组件的双向绑定数据问题

    1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能.当一个子组件改变了一个 pr

  • Vue组件中的父子组件使用

    目录 Vue组件中的父子组件 父组件向子组件传值 子组件向父组件传值 Vue父子组件的生命周期 总结 Vue组件中的父子组件 父组件向子组件传值 父组件通过属性绑定(v-bind:)的形式, 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 子组件需要在内部定义 props 属性.例如 props : [ ‘parentmsg’ ] 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据 所有 props 中的数据都是通

  • vue同步父子组件和异步父子组件的生命周期顺序问题

    关于vue组件的引入方式有两种 一. 同步引入 例子: import Page from '@/components/page' 二.异步引入 例子:const Page = () => import('@/components/page') 或者: const Page = resolve => require(['@/components/page'], page) 两种引入方式的不同之处在于: 同步引入时生命周期顺序为:父组件的beforeMount.created.beforeMoun

随机推荐