【vue组件通信之非父子组件通信】的更多相关文章

vue组件通信之非父子组件通信

什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit  触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on  监听当前实例上的自定义事件.事件可以由vm.$emit触发.回调函数会接收所有传入事件触发函数的额外参数. 基础知识准备好了,下面,我们就来实现非父子组件之间是怎样通信的: 第一步,我们需要新建一个js文件,用来创建一个Vue实例并暴露出去 创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件 假如,我们想要Home组件传递自…

组件基础（非父子组件传值）—Vue学习笔记

最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的一行代码如下 Vue.prototype.young=new Vue();//在Vue实例上挂载一个为young的属性(指向Vue实例),当然young使随便取的. 先创建一个基础框架 <body> <div id="app"> <hello message=…

vue bus方式解决非父子组件间的传值

对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <child content = "dell"></child> //这两个子组件之间可以互相传值 <child content = "lee"></child> </div> </body> <scri…

Vue组件通信之非父子组件传值

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

vue 父子之间通信及非父子之间通信

直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 组件一 this.$bus.emit('add-todo','这里是发送的数据'); 组件二 created(){ this.$on('add-todo',(data)=>{ console.log(data,'接收到的数据') }) }…

Vue组件传值，父传子，子传父，非父子组件

vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if="alert" v-bind:message="alert"></Alert> </div> </template> <script> import Alert from './Alert' export defaul…

Vue 非父子组件通信

组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com…

vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递. 首先需要在任意地方添加一个bus.js 在bus.js里面 写入下面信息 import Vue from 'vue' 2 export default new Vue; 在需要通信的组件都引入Bus…

Vue 非父子组件通信方案

Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要先监听对应子组件触发的事件) 向父组件传递信息. 但是当我们需要进行非父子组件间的通信或者是父子组件间的通信需要层层传递过于复杂时就需要使用非父子组件通信方案来进行组件间信息的传递: 下面是常见的两种非父子组件通信方案: 使用一个空的 Vue 实例作为一个事件总线中心 Bus 使用专门的状态管理模式…

vue父子组件及非父子组件通信

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