Vue兄弟之间传值

淡淡的烟草味﹌ 2022-12-04 07:54 195阅读 0赞

转载自 [https://www.jianshu.com/p/661634c1af9b][https_www.jianshu.com_p_661634c1af9b] ，感谢作者 ！！！  
原理

vue非父子通信一般常用的方法有 EventBus 和 Vuex，这里讲下bus
    过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去
    ( bus.$emit(event, [...args]) )，然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback) )。
    PS: 共用同一个Vue的实例( new Vue() )，通过此实例进行事件传递参数，在其他组件中监听此事件并且接收参数实现通信。

bus.js

//（实例化一个Vue对象并暴露）
    import Vue from 'vue'
    const bus = new Vue()
    export default bus

组件Hello.vue

<template>
      <div class="hello">
        <h1>参数：{
       { number }}</h1>
        <button @click="sendParam()">发送</button>
      </div>
    </template>
    <script>
    import bus from './bus'
    export default {
      data () {
        return {
          number: 123
        }
      },
      methods: {
        sendParam () {
          bus.$emit('getParam', this.number)
        }
      }
    }
    </script>

组件World.vue

<template>
      <div class="hello">
        <h1>接受参数{
       { number }}</h1>
      </div>
    </template>
    <script>
    import bus from './bus'
    export default {
      data () {
        return {
          number: 0
        }
      },
      created () {
        bus.$on('getParam', param => {
          this.number = param
        })
      },
      beforeDestroy () {
        bus.$off('getParam')
      }
    }
    </script>

组件Home.vue （同时引入Hello.vue组件和World.vue组件）

<template>
      <div class="home">
        <hello></hello>
        <world></world>
      </div>
    </template>
    
    <script>
    import Hello from '@/components/Hello'
    import World from '@/components/World'
    export default {
      name: 'Home',
      data () {
        return {
        }
      },
      components: {
        Hello,
        World
      }
    }
    </script>

[https_www.jianshu.com_p_661634c1af9b]: https://www.jianshu.com/p/661634c1af9b