Vue非父子组件通信详解

2024-12-04 16:13:10

组件是Vue核心的一块内容，组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据，子组件向父组件传数据，非父子组件间的通信。前两种通信Vue的文档都说的很清楚，但是第三种文档上确只有下面的几句

具体如何去实现却没有很详细的说明，于是自己试着进行了实现。先看下简单的通信效果：

就是点击了一个组件，另一个组件的数字递加。

html如下：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
</div>

再来看一下如何实现每一个组件：

var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

  Vue.component('component-a',{
    template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件incrementB ,因为点击A需要增加B
    data ()  {
      return {
        masgA : 0
      }
    },
    methods: {
      incrementB: function () { //增加B的事件
        bus.$emit('incrementB') //中转站bus 触发incrementB事件
      }
    },
    mounted: function () {
      var _this = this
      bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA，这个事件最终由组件B进行触发
        _this.masgA ++
      })
　　　　　　　//bus.$on('incrementA',()=>{ //这里也可以用箭头函数，就不会有_this这个变量了，因为箭头函数不会改变this指向
　　　　　　　//　this.masgA ++
　　　　　　 //})
    }
  })

从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的，同理代component-b也是一样

Vue.component('component-b',{
    template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
    data ()  {
      return {
        masgB : 0
      }
    },
    methods: {
      incrementA: function () {
        bus.$emit('incrementA')
      }
    },
    mounted: function(){
      bus.$on('incrementB',() => {
        this.masgB ++
      })
    }
  })

完整代码如下，可直接复制运行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>非父子组件通信</title>
</head>
<body>
  <div id="app">
    <component-a></component-a>
    <component-b></component-b>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
<script>
  var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转

  Vue.component('component-a',{
    template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件
    data ()  {
      return {
        masgA : 0
      }
    },
    methods: {
      incrementB: function () {
        bus.$emit('incrementB')
      }
    },
    mounted: function () {
      var _this = this
      bus.$on('incrementA',function(){
        _this.masgA ++
      })
      bus.$on('incrementA',()=>{
        this.masgA ++
      })
    }
  })

  Vue.component('component-b',{
    template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
    data ()  {
      return {
        masgB : 0
      }
    },
    methods: {
      incrementA: function () {
        bus.$emit('incrementA')
      }
    },
    mounted: function(){
      bus.$on('incrementB',() => {
        this.masgB ++
      })
    }
  })

  var vm = new Vue({
    el: "#app"
  })
</script>

同时也可以看出这么做仅有两个组件就有些麻烦，事件的流向不是很清晰，所以在出现复杂的场景时需要使用VueX进行管理。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue2利用Bus.js如何实现非父子组件通信详解

前言大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus
详解Vue 非父子组件通信方法（非Vuex）

一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus
Vue非父子组件通信详解

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

目录第一种方法 App.vue Home.vue HomeContent.vue 数据的响应式修改响应式Property 总结业务场景是,不是父子组件实现通信文件目录第一种方法 App.vue <template> <div> <Home></Home> <button @click="addName">增加名字</button> </div> </template> <sc
vue非父子组件通信问题及解决方法

问题描述: 最近在做登录部分时遇到一个场景,当点击 "用户"按钮时,首先渲染login组件,在用户登录后直接跳转到用户信息界面(user组件).这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧. 简而言之,我要解决的就是兄弟组件之间的信息传递问题. //位于login.vue 中 export default { methods:{ login(){ this.$axios({ method: '
React中父子组件通信详解

目录父组件向子组件通信存在期父组件向子组件通信在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类子组件是作为属性来接收这些数据的第一类就是数据:变量,对象,属性数据,状态数据等等这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种作为事件回调函数执行参数默
angular父子组件通信详解

目录用到的api 简单的例子 person.ts 父组件子组件效果总结用到的api Input - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据 Output - 子组件中定义输出的属性,该属性需要是 EventEmitter 的事件类型,用来通知父组件做出相应的操作 EventEmitter - 用在带有 @Output 指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器. 简单的例子列表渲染子组件,点击子组件通知父组件进行操作 pers
Vue非父子组件之间的通信方式详解

目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线总结非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信. 这里我们主要讲两种方式: Provide/Inject: 全局事件总线: 1.Provide和Inject 1.1基本使用 Provide/Inject用于非父子组件之间共享数据: 比如有一些深度嵌套的组件
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父
Vue.js 父子组件通信的十种方式

面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备技能.而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题. 最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来.真的是无规范不成方圆,规范这个东西太重要了!有点扯了,回到主题,咳

Vue非父子组件通信详解

相关推荐

随机推荐