精华内容
下载资源
问答
  • 关于Vue3中的兄弟组件中数据传递事件总线)如何使用mitt安装并使用mitt 因为之前使用vue2.0时经常用事件总线 $emit 和 $on 在使用vue3.0时这两个方法被移除了,无法使用Vue.prototype.$bus = new Vue(),所以说...

    关于Vue3中的兄弟组件中数据传递(事件总线)

    因为之前使用vue2.0时经常用事件总线 $emit 和 $on
    在使用vue3.0时这两个方法被移除了,无法使用Vue.prototype.$bus = new Vue(),所以说怎么样才能让兄弟组件甚至是任意组件之间进行传递呢?

    那当然是引入第三方mitt库啦 !!!也是官方推荐的


    如何使用mitt

    想在Vue3当中使用事件总线当然也非常简单的啦一共分为三个步骤
    1.安装
    2.挂载
    3.使用


    安装并使用mitt

    不需要写任何复杂的代码,使用方式和vue2几乎无差别

    安装

    $ npm install --save mitt
    

    挂载

    //main.js中
    import mitt from "mitt"
    import { createApp } from "vue"
     
    const app = createApp({})//正常配置
    //挂载事务总线
    app.config.globalProperties.$bus = new mitt()
    

    使用

    //在组件A中使用事务总线触发某个动作
    this.$bus.emit("EVENTTYPE");
     
    //在组件B中监听动作的发生
    this.$bus.on("EVENTTYPE",()=>{
        console.log("EVENTTYPE发生了")})
    

    这样就可以啦!~

    展开全文
  • 在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, ...我们再组件一设置一个事件调用组件的事件传递数据给组件二 ()> [removed] export default { data
  • vue兄弟组件传递数据

    2021-04-04 15:29:58
    vue兄弟组件传递数据方式 例子: <div id="app"> <zuozhe></zuozhe> <yonghu></yonghu> </div> <script> var bus=new Vue()//实例化一个vue,作为中央事件总线,...

    vue兄弟组件传递数据的方式
    例子:

      <div id="app">
            <zuozhe></zuozhe>
            <yonghu></yonghu>
        </div>
        <script>
            var bus=new Vue()//实例化一个vue,作为中央事件总线,利用它完成两个组件的交互
            Vue.component("zuozhe",{
                template:`    
                <div>
                <input type="text" ref="mytext">我是作者
                <button @click="handleClick()">发布</button>
                </div>
                `,
                methods: {
                    handleClick(){
                        bus.$emit("message",this.$refs.mytext.value)
                        //bus.$emit和bus.$on的第一个参数必须一样(此处为message)
                    }
                },
            })
            Vue.component("yonghu",{
                template:`          
                <div>
                我是用户
                </div>                               
                `,
               mounted() {//生命周期函数,当前组件dom创建完后就会调用
                   bus.$on("message",(data)=>{
                       alert(data)
                   })
               },
            })
    
            new Vue({
                el:"#app",
                data:{},
            })
        </script>
    
    展开全文
  • 使用vue进行组件化开发时,经常会遇到需要在业务组件中监听某个公共组件的数据变化和事件触发。大致归类为两种场景: 业务组件为公共组件的直接父组件(父子关系) *事件传递: 子组件定义一个方法,方法中...

        使用vue进行组件化开发时,经常会遇到需要在业务组件中监听某个公共组件的数据变化和事件触发。大致归类为两种场景:

    1. 业务组件为公共组件的直接父组件(父子关系)

      *事件传递:
      子组件定义一个方法,方法中通过this.$emit(‘event’)方式将触发事件传递出来;就可以在父组件中监听event事件,当事件触发时,执行自定义的方法。
      *数据传递:
      同样使用\$emit,在传递事件的同时将数据作为参数传递出去,父组件调用时,让本组件的数据等于传递过来的参数即可

      //子组件GlobalHeader中定义方法

      branchChenge () {
        this.$emit('branch-click', this.branch)
      }
      

      //父组件监听branch-click事件触发时执行函数

      <global-header @branch-click="branchClick"></global-header>
      

      //让本组件的数据等于传递过来的参数,实现事件和数据的传递

      branchClick: function (branch) {
        this.branch = branch
        alert(this.branch)
      }
      
    2. 业务组件与公共组件在同一个父组件下(兄弟关系)

      这篇帖子主要说这种情况,如图:
      在这里插入图片描述
      代码:

      <template>
        <el-container>
          <sider-menu></sider-menu>
          <el-container direction="vertical">
      	  <!-- global-header公共组件 -->
            <global-header @branch-click="branchClick" @sys-click="sysClick"></global-header>
            <el-main>
      		<!-- router-view业务组建 -->
              <router-view ref="viewArea"></router-view>
            </el-main>
            <global-footer></global-footer>
          </el-container>
        </el-container>  
      </template>
      

      业务场景:
      分支渠道选择组件global-header与业务组件router-view在同一个父组件下,业务组件需要监听分支渠道信息的变化来刷新页面数据。
      思路:
      两个组件拥有同一个父组件,考虑通过父组件作为中间组件,实现子组件之间的事件、数据传递。
      实现:
      1.通过父组件监听global-header组件的事件和数据变化,同场景一;
      2.router-view组件中定义刷新数据方法updData(),传递到父组件,由父组件代替子组件执行;

      //router-view组件中定义刷新数据方法

      updDataFn (branch, sysId) {
          this.branch = branch
          this.sysId = sysId
          this.getUserInfo()
      }
      //父组件中引用router-view组件时,添加一个标识符 ref='viewArea' 
      //然后父组件可以通过this.$refs.viewArea.updDataFn(branch, sysId)
      //获取到子组件的方法
      branchClick: function (branch, sys) {
          this.updData(branch, sys)
      },
      sysClick: function (branch, sys) {
          this.updData(branch, sys)
      },
      updData (branch, sysId) {
         if (branch && sysId) {
           this.$refs.viewArea.updDataFn(branch, sysId)
        }
      }
      
    展开全文
  • 在使用Vue进行开发过程中,难免会遇到兄弟组件之间通信需求。实现兄弟组件通信最简单方式就是:要发送数据子组件先把数据传给父组件,再由父组件传给需要接收数据子组件。 然而上述传递方式过于繁琐,我们...

    在使用Vue进行开发的过程中,难免会遇到兄弟组件之间通信的需求。实现兄弟组件通信最简单的方式就是:要发送数据的子组件先把数据传给父组件,再由父组件传给需要接收数据的子组件。

    然而上述传递方式过于繁琐,我们接下来讨论另外一种通信方式。

    中央事件总线

    这里就用我今年3月份参加全国大学生计算机设计大赛做的一个作品举例。

    首先我们先建立一个bus.js文件,如下图所示(项目是使用vue-cli脚手架搭建的):
    在这里插入图片描述
    bus.js的代码如下:

    import Vue from 'Vue'
    
    const EventBus = new Vue();
    export default EventBus;
    

    观察上述代码,我们会发现中央事件总线其实就是导出一个Vue实例,接下来就可以在需要通信兄弟组件中使用bus了。

    需要发送数据的组件:

    // 引入中央事件总线
    import EventBus from '@/assets/bus'
    
    //通过$emit方法向组件外传递事件
    //其中diskMemInfo为自定义的事件名,this.pcDisk,this.pcMemory为参数,可以传递多个参数
    EventBus.$emit('diskMemInfo', this.pcDisk, this.pcMemory);
    

    需要接收数据的组件:

    //引入中央事件总线
    import EventBus from '@/assets/bus'
    
    //通过$on方法监听兄弟组件传递的事件
    //其中回调函数的参数pcDisk, pcMemory是兄弟组件传递过来的数据
    EventBus.$on('diskMemInfo', (pcDisk, pcMemory) => {
    	//你的代码
    })
    

    注意:中央事件总线很方便地就实现了兄弟组件之间的通信,但缺点是只触发一次。

    只触发一次是什么意思呢?我们先来看我在项目中使用中央事件总线时发现的一个bug。
    在这里插入图片描述
    在上述图片中,有三个组件,分别是基础信息组件、实时监控组件、历史数据组件,它们是兄弟组件。

    我在基础信息组件和实时监控组件中使用了中央事件总线进行通信,一开始,这两个组件是同时渲染的,所以可以正常通信。但当我切换到历史数据组件,再切换回实时监控组件,通信就失效了。原因是当切回来的时候,实时监控组件已经重新渲染了(因为element-ui的tab组件默认情况下是不渲染隐藏组件的,所以我们一开始切换到历史数据组件,就隐藏了实时监控组件,这时它会被卸载,那么当它重新被显示时就会重新渲染),而基础信息组件还保持原来的状态。

    经过上述分析,我们得出:只触发一次就是当通信的兄弟组件同时渲染时,中央事件总线才生效。所以,在使用中央事件总线时,我们要确保通信的两个组件要同时渲染,同时被卸载。

    兄弟组件通信的其它方式

    当不适合使用中央事件总线进行兄弟组件通信的时候,我们可以使用Vuex或者本地存储localStorage来进行通信。

    展开全文
  • Vue 实例模块会成为共用的事件触发器。 其通过事件传递的信息不回被公有化。 3.建立事件链传递数据。 一个兄弟组件通过事件将信息传给兄弟组件共有的父组件。 父组件再将信息通过属性传递给另一个兄弟组件。 若兄弟...
  • 1、安装 npm install vue-bus --save ...import Vue from 'vue'; ...A页面中,触发了一个叫toBPage的事件,并传递了参数’hello world!’ methods: { toBPage(){ this.$bus.emit('bPage', 'hello w
  • Vue父子组件、兄弟组件的通讯方式 ** 一、父组件向子组件传值(传参)? 父组件通过动态绑定属性,子组件通过props接受值 二、子组件向父组件传值(传参)? 子组件设置一个点击事件,通过this.$emit(‘父组件一个...
  • 组件化应用构建是Vue的特点之一,因此我们在Vue的实际开发过程中会经常需要封装自定义组件,以提高开发的效率。 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互。所以在这里为...
  • 例如兄弟组件A和组件B,B要调用A某个事件 一、新建bus.js,并引用 /**bus.js**/ import Vue from 'vue' const bus = new Vue() export default bus bus.js我放在src/assets/utils路径下面 二、在B组件页面里 // ...
  • 1.兄弟组件通信:创建新的vue实例bus.js//bus.jsimport Vue from 'vue' export default new Vue组件A:import Bus from 'bus.js' Bus.$emit('name', something) //name按照我自己理解就是一个连接作用 连接着$on...
  • 坑也比较多,在实际项目开发中,我使用过,父传子,子再传父,多次传递,可以实现兄弟组件的传递,这种方法不说了,没什么精髓,而且处理比较慢,我介绍另一种兄弟组价的传递方法——中央事件总线 &&...
  • vue.js 兄弟组件之间传递方法

    千次阅读 2018-08-13 17:46:43
    2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。 3、传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据)。 4、接收数据方,通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该...
  • vm.emit("事件名(比如click,input等事件,这个不是函数名)",形参):触发当前实例上的事件。附加参数都会传给监听器回调。−−−−发布vm.emit( "事件名(比如click,input等事件,这个不是函数名)", 形参 ):...
  • 3.子组件获取父组件传递过来值 需求说明 如图,我想要实现当点击字母L,页面定位到L开头城市名 Do it 1.找到字母表页面 在html标签绑定一个click事件,在js中定义一个方法,并使用参数e...
  • 这就需要兄弟组件的数据传递的实现了 1. 兄弟组件数据传递。因为层级结构简单。所以采用是子组件传递数据给父组件,然后父组件再传递数据给子组件 先说子组件将点击事件发生后对应字母传递给父组件。 &...
  • 组件化应用构建是Vue的特点之一,因此我们在Vue的实际开发过程中会经常需要封装自定义组件,以提高开发的效率。 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互。所以在这里为...
  • 父访问子 1.props 2. refs 子访问父 1.$emit自定义事件 2. $parent 3. props传递函数 兄弟组件(或隔层级)通信 1. 新建空的Vue实例对象bus 2. vuex
  • vue脚手架中使用兄弟组件传参(事件中心总线bus) 1.在main.js中创建一个第三方实例bus用来传递参数 Vue.prototype.$bus = new Vue() 2.在数据发送页面进行$emit事件弹射 this.$bus.$emit("showChat",true);//第...
  • eventbus //创建一个空的vue实例,作为事件总线 var eventbus = new Vue();... //通过事件总线发射一个事件名称和需要传递的数据 eventbus.$emit('tellBrotherMyName', this.myName); } mou...
  • vue的组件化系统中,我们最常遇到的一个问题就是组件之间的各种数据传递关系问题。因此解决数据传递的问题就是非常关键的问题。 父子组件数据传递方式 第一种方式:通过props和$emit配置的非绑定式数据传递 这是一...
  • 1、兄弟组件之间传值要借助事件车,通过事件方式传递数据。 2、中央事件总线(通俗讲就是:eventBus事件车)实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间通信。它是实现非父子组件通信...
  • Vue兄弟组件的传值

    2020-05-06 11:14:39
    关于兄弟组件之间传值,我这里是通过vue-bus实现 安装vue-bus npm install vue-bus 在入口文件(main.js)进行全局注册 import VueBus from 'vue-bus' Vue.use(VueBus) 传递数据 定义一个触发事件(allLink)...
  • 兄弟组件之间传递数据,使用vuex, 但是对于通信需求简单组件之间,vue 官网提供了一种更简单方法叫做 中央事件总线; 下面简单介绍一下中央事件总线步骤及最近开发中使用中央数据总线遇到问题。 一,创建...
  • vue:兄弟组件传参

    千次阅读 2018-07-06 17:21:22
    vue兄弟组件数据传递需要借助事件车,需要利用一个事件车bus进行传递数据首先创建一个vue实例,让兄弟组件共同用一个事件然后传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据)然后数据接收方,通过...
  • Vue入门-兄弟组件之间通信

    千次阅读 2018-06-21 11:55:38
    兄弟组件通信的逻辑实现注意: 借助于一个公共的Vue的实例对象,不同的组件可以通过该对象完成事件的绑定和触发.第一步: 在child1子组件中,给button按钮绑定一个点击事件toChild2, 在事件中我们通过公共的vue对象...
  • 经过之前学习,我们已经大致了解到了数据在组件之间的传递 父组件通过 props 属性将数据传递给子组件 子组件通过自定义事件将数据传递给父...1.兄弟组件之间数据传递 兄弟关系组件拥有一个共同父组件,那么就
  • vue 兄弟组件之间的传值 1、兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据 2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。 3、传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据)。...
  • vue.js 兄弟组件传值

    2019-04-15 11:25:45
    vue.js 兄弟组件传值 1、兄弟之间传递数据需要借助于<事件车>,通过<事件车>的方式传递数据 2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。 3、传递数据方,通过一个事件触发bus.$emit(方法名,...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 309
精华内容 123
关键字:

vue的事件传递兄弟组件

vue 订阅