vue $emit $on 非父子非兄弟组件传值

最新推荐文章于 2023-02-16 16:26:54 发布

转载最新推荐文章于 2023-02-16 16:26:54 发布 · 202 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mycodeworld/p/8720584.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js实现的简单示例，展示了如何通过自定义事件总线在不同组件之间进行通信。具体包括创建事件总线、从一个组件发送消息到另一个组件的过程。

bus.js 放置src根目录

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

test1.vue 传值组件

<template>
<div>
  <button @click="add()">点击</button>
</div>
</template>

<script>
import Bus from '../bus.js'
export default {
  data () {
    return {
      msg: 'I come from first'
    }
  },
  methods: {
    add () {
      // 定义add方法，并将msg通过txt传给test2组件
      Bus.$emit('txt', this.msg)
      this.$router.push({name: 'test2'})
      this.msg = ''
    }
  }
}
</script>

<style scoped>

</style>

test2.vue 接收组件 console.log(_this.msg) 打印出test1 传过来的值

<template>
  <div>{{msg}}</div>
</template>

<script>
import Bus from '../bus.js'
export default {
  data () {
    return {
      foo: 'Foo component',
      msg: 'I come from second'
    }
  },
  mounted: function () {
    let _this = this
    Bus.$on('txt', function (msg) {
      _this.msg = msg
      console.log(_this.msg)
    })
  }
}
</script>

<style scoped>

</style>