精华内容
下载资源
问答
  • 下面小编就为大家分享一篇基于vue 兄弟组件之间事件触发(详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue组件间数据传递的方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用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 实例有event对象 可以实现自定义事件,实现兄弟组件间通信。 项目结构:event.js 导出vue实例对象 Input.vue 和 list.vue兄弟组件 ,index.vue 引入 两个子组件,实现 Input 和list 间通信 看event....

    首先 vue 实例有event对象 可以实现自定义事件,实现兄弟组件间通信。

    项目结构:event.js 导出vue实例对象  Input.vue 和 list.vue 是兄弟组件 ,index.vue 引入 两个子组件,实现 Input 和list 间通信

    看event.js

    import vue from 'Vue'
    export default new vue()

    Input.vue

    <template>
      <div class="inputcontetn">
        <input type="text" v-model="title" />
        <button @click="add" class='red'>添加</button>
      </div>
    </template>
    <script>
    import event from "./event";
    export default {
      name: "input",
      data() {
        return {
          title: ""
        };
      },
      methods: {
        add() {
          this.$emit("add", this.title);
          event.$emit('ontitle', this.title)
        }
      }
    };
    </script>
    <style lang="less" >
    @color:red;
    .red{
      background-color: @color;
    }
    </style>

    list.vue

    <template>
      <div class="inptutcontent">
        <ul>
          <li v-for="item in list" :key="item.id">
            {{item.name}}
            <button @click="deleteItem(item.id)">删除</button>
          </li>
        </ul>
      </div>
    </template>
    <script>
    import event from "./event";
    export default {
      name: "list",
      props: {
        list: {
          type: Array,
          default() {
            return [];
          }
        }
      },
      data() {
        return {};
      },
      mounted(title){
          //绑定自定义事件
       event.$on('ontitle',this.onEvent)
      },
      methods: {
        deleteItem(id) {
          this.$emit("deteItem", id);
        },
        onEvent(title){
            console.log(`自定义事件${title}`)
        }
       
      },
      beforeDestroy(){
         //及时销毁自定义事件 防止内存泄露
         this.$off('ontitle',this.onEvent)
      }
    
    };
    </script>
    <style lang="less">
    @color: red;
    .body {
      background: @color;
    }
    </style>

    index.vue

    <template>
      <div class="content">
          自定义事件
        <input-com @add='handleadd'></input-com>
        <list-com :list="list" @deteItem="handledelete"></list-com>
      </div>
    </template>
    <script>
    import InputCom from "./Input";
    import listCom from "./list";
    export default {
      name: "index",
      data() {
        return {
          list: [
            {
              id: "id-1",
              name: "苹果"
            },
            {
              id: "id-2",
              name: "香蕉"
            }
          ]
        };
      },
      methods:{
          handleadd(title){
                this.list.push({id:`id-${Date.now()}`,name:title})
            },
             handledelete(id){
              this.list=this.list.filter((item)=>{return item.id!==id})
              // this.list = this.list.filter(item => item.id !== id)
            }
      },
      components: {
        "input-com": InputCom,
        "list-com": listCom
      }
    };
    </script>
    <style lang="less" scoped>
    </style>

    添加的时候结果

    实现了通信。。。

    展开全文
  • 主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 兄弟组件的信息传递的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue如何实现兄弟组件间值传递

    千次阅读 2018-03-15 16:23:09
    那么vue如何实现兄弟组件数据共享呢? 可借助父子组件间值传递方法,实现原理是:子传父,父传子。 这里我们用例子来简单介绍下: 子组件传值给父组件: 子组件通过触发父组件事件传值给父组件,子组件child1....

    vuex是状态管理仓库,可实现组件间数据共享,但vuex适合大型项目应用,用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢?
    可借助父子组件间值传递方法,实现原理是:子传父,父传子
    这里我们用例子来简单介绍下:

    子组件传值给父组件
    子组件通过触发父组件事件传值给父组件,子组件child1.vue代码:

    <template>
        <div>
            <h3>子组件child1,把值传递给父组件</h3>
            <p><button @click="postData">点击传值给父元素</button></p>
        </div>
    </template>
    <script>
        export default{
            data(){
                return {
                    message : '子组件1的data'
                }
            },
            methods:{
                postData: function(){
                    this.$emit("parentEvent",this.message)
                }
            }
        }
    </script>

    父组件传值给子组件:

    父组件通过props传值给子组件,子组件child2.vue代码:

    <template>
        <div>
            <h3>子组件child2,通过父组件获取子组件child1的值</h3>
            <p>{{message}}</p>
        </div>
    </template>
    <script>
        export default{
            props: ['message'],
            data(){
                return{}
            },
            methods:{
    
            }
        }
    </script>

    父组件代码:

    <template>
      <div id="app">
        <h1>{{ msg }}</h1>
        <h1>父页面</h1>
        <child1 @parentEvent="getData"></child1>
        <child2 :message="msg"></child2>
      </div>
    </template>
    
    <script>
    import child1 from './child1'
    import child2 from './child2' 
    export default {
      name: 'app',
      components: {
        child1,
        child2
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        getData:function(data){
          this.msg = data; 
        }
      }
    }
    </script>
    展开全文
  • 三、兄弟组件相互通信 1、通信方式:定义一个vue实例的bus,又名事件车,或中继器,或事件分发器等等,使用触发$emit和监听$on实现。 2、代码示例: 定义vues实例bus:bus.js   import Vue from '...

                                       欢迎微信关注Jerome blog,用技术的心去生活

    vue中组件通信的三种方式

    一、父组件向子组件通信:

    1、通信方式:props

    2、代码示例:

    父组件页面:father.vue

    <template>
      // v-bind来绑定动态数据,静态数据可以不用v-bind指令(:是v-bind的简写)
      <child-component :message='message'></child-component>
    </template>
    <script>
    import child from 'child.vue';
    export default {
      name: "father",
      data() {
        return {
          message: 'hello'
        }
      },
      components: {
        'child-component': child
      }
    }
    </script>

    子组件页面:child.vue

    <template>
      <div class='child'>{{ message }}</div>
    </template>
    
    <script>
    export default {
      name: "child",
      props: ['message']
    }
    </script>

    3、tips:

    (1)、prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。

    (2)、每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

    二、子组件向父组件通信:

    1、通信方式:父组件监听事件的触发($on),子组件手动触发事件($emit)。

    2、代码示例:

    父组件页面:father.vue

     

    <template>
      // 父组件监听listenChild事件,执行getChildData方法,并且拿到传递过来的数据(@是v-on的简写)
      <child-component @listenToChild='getChildData'></child-component>
    </template>
    
    <script>
    import child from 'child.vue';
    export default {
      name: "father",
      methods: {
        getChildData (val) {
          console.log(`子组件传递过来的数据: ${val}`); // hello
        }
      },
      components: {
        'child-component': child
      }
    }
    </script>

    子组件页面:child.vue

    <template>
      <div class='child'></div>
    </template>
    
    <script>
    export default {
      name: "child",
      created () {
        // 在需要的传递数据的时候调用sendData方法,这里模拟调用
        this.sendData();
      },
      methods: {
        sendData () {
          this.$emit('listenToChild', 'hello');
        }
      }
    }
    </script>

    三、兄弟组件相互通信

    1、通信方式:定义一个vue实例的bus,又名事件车,或中继器,或事件分发器等等,使用触发$emit和监听$on实现。

    2、代码示例:

    定义vues实例bus:bus.js

     

    import Vue from 'vue';
    export default new Vue;

    A页面:a.vue(发送)

    <template>
      <div class='a'></div>
    </template>
    
    <script>
    import Bus from 'bus.js' ;
    export default {
      name: "a",
      created() {
        // 在需要的传递数据的时候调用sendData方法,这里模拟调用
        this.sendData();
      },
      methods: {
        sendData () {
          Bus.$emit('listenToA', 'hello');
          //listenToA是监听事件名,hello是参数
        }
      }
    }
    </script>

     B页面:b.vue(接收)

    <template>
      <div class='b'></div>
    </template>
    
    <script>
    import Bus from 'bus.js';
    export default {
      name: "b",
      monted() {
        Bus.$on('listenToA',(res)=>{
            console.log(res)
            //res表示接收到的监听的事件传递的数据
        });
      },
      methods: {
        
      },
      beforeDestroy(){
        //页面销毁前移除监听  
        Bus.$off('listenToA')
      },
    }
    </script>

    3、tips:

    在a b两个页面都要引入bus.js这个事件车

    展开全文
  • 例如兄弟组件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组件页面里 // ...
  • 今天小编就为大家分享一篇vue兄弟组件传递数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 兄弟组件传值,通过事件总线完成。 1、定义父组件并且在父组件中,完成两个兄弟组件的创建。 <script> Vue.component('father', { template: '<div><son></son><daughter></...
  • 关于Vue3中的兄弟组件的数据传递

    千次阅读 2021-01-06 15:49:39
    关于Vue3中的兄弟组件中数据传递事件总线)如何使用mitt安装并使用mitt 因为之前使用vue2.0时经常用事件总线 $emit 和 $on 在使用vue3.0时这两个方法被移除了,无法使用Vue.prototype.$bus = new Vue(),所以说...
  • vue3 mitt 兄弟组件传值

    2021-11-18 10:04:29
    安装 npm i mitt 新建文件 eventBus.js eventBus.js ...import { defineComponent } from "vue"; import emitter from "../plugins/eventBus" export default defineComponent({ setup(){ //定义一个
  • 兄弟组件之间数据交互兄弟组件之间数据交互需求需求实现 兄弟组件之间数据交互需求 需求:创建两个组件,分别是 kk-text 和 bb-text ,两个组件里都有一个属性 num, 在两个组件的字符串模板里都定义一个按钮,每当...
  • vue使用路由在兄弟组件间参数传递

    千次阅读 2019-06-21 14:06:46
    在没有使用路由时,vue中参数传递是被限制在父子组件中,而当兄弟组件间需要传递参数时是很繁琐的,只能子传父父传子这样绕圈;但使用了路由之后就变得轻松许多。 根组件App: router-view的注意点在代码中已经注释...
  • 前言​ 最近在用Vue+echarts+d3做一个项目,网上大多数是零散的,我把项目中遇到 的问题都总结起来,放在...​ 这篇博客主要分享的知识点是Vue中父组件传以及echarts鼠标事件中的父组件传值,还解决了一个在父组件传...
  • 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式:EventBus和利用Vuex框架进行状态管理。 我会通过两种不同的交互方式,它们对于...
  • vue中组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯 1. 父组件给子组件传值: 父组件可以使用props向子组件传递数据 父组件模板: <template> <child :msg="message"></child> </...
  • <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...script src="../js/vue.js"></sc
  • vue 兄弟组件之间事件触发

    万次阅读 2017-12-25 11:25:49
    兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件。场景是父级组件A同时引用两个子级组件B,C。点击B组件中的按钮执行C组件中的事件。第一步:父级组件A &lt;bottom-play :play=&...
  • 同级(兄弟组件间不能直接传递数据,需要建立一个类似桥梁的载体去实现。 1、定义一个公共文件public.js,创建位置工程src目录下与main.js同级(代码内容是创建一个空的vue实例): import Vue from 'vue' ...
  • 一.递归组件向外传递数据直接用$emit是无法实现的。因为是递归的原因。 2.解决方法: 1方法1::用provide,inject方法实现。...2.方法2:用eventBus实现:这种方法用在兄弟组件之间通信很常见。当然也可以用在爷爷...
  • 兄弟组件间的数据通信 功能开发过程,调用通用选择页面获取数据,需要调用一个组件,同时获取返回的数据; 第一步:声明一个各组件都能操作到的公共实例 ...第三步:兄弟组件通过$emit传递数据 ...
  • vue组件间的传值不同组件关系有不同的传值方式(父子组件间传值可是通过props来实现),在此主要介绍兄弟组件间通信的一种方法(全局事件总线),同样这也是一种通用的组件间传值方式,适用于不止兄弟组件间传值。...
  • 在使用Vue进行开发的过程中,难免会遇到兄弟组件之间通信的需求。实现兄弟组件通信最简单的方式就是:要发送数据的子组件先把数据传给父组件,再由父组件传给需要接收数据的子组件。 然而上述传递方式过于繁琐,我们...
  • vue组件化系统中,我们最常遇到的一个问题就是组件之间的各种数据传递关系问题。因此解决数据传递的问题就是非常关键的问题。 父子组件数据传递方式 第一种方式:通过props和$emit配置的非绑定式数据传递 这是一...
  • 安装并使用mitt 不需要写任何复杂的代码,使用方式和vue2几乎无差别 $ npm install --save mitt 挂载 //main.js中 import mitt from "mitt" import { createApp } from ...//在组件A中使用事务总线触发某个动作 t

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,423
精华内容 2,969
关键字:

vue的事件传递兄弟组件

vue 订阅