组件自定义事件实现传值，非父子组件之间的传值

组件自定义事件实现传值

非父子组件之间的传值
1、定义一个空的vue实例化对象，用于出发和监听实例，相当于第三方
1.1定义一个公共的bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

1.2在子组件A里用$emit发射数据

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from '@/assets/js/bus.js'
  export default {
    data () {
      return {
        elementValue: 4,
        hh:'nqwl'
      }
    },
    methods: {
      elementByValue() {
        Bus.$emit('val', [this.elementValue,this.hh]) //发射组件A的数据
      }
    }
  }
</script>

1.3、在子组件B里用$on接收数据

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>

import Bus from '@/assets/js/bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {  // 接收组件A传过来的数据
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData() {
        this.name++
      }
    }
  }
</script>

图例