Vuejs 用$emit与$on来进行数据传输通信

Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vue2-单一事件管理组件通信title>
  <script src="vue.js">script>
  <script type="text/javascript">

  //准备一个空的实例对象
  var Event = new Vue();

  //组件A
  var A = {
    template: `
      
我是A组件的数据->{{a}}
`
, methods: { send () { Event.$emit("a-msg", this.a); } }, data () { return { a: "我是a组件中数据" } } }; //组件B var B = { template: `
我是B组件的数据->{{a}}
`
, methods: { send () { Event.$emit("b-msg", this.a); } }, data () { return { a: "我是b组件中数据" } } }; //组件C var C = { template: `

我是C组件

接收过来A的数据为: {{a}}
接收过来B的数据为: {{b}}
`
, mounted () { //接收A组件的数据 Event.$on("a-msg", function (a) { this.a = a; }.bind(this)); //接收B组件的数据 Event.$on("b-msg", function (a) { this.b = a; }.bind(this)); }, data () { return { a: "", b: "" } } }; window.onload = function () { new Vue({ el: "#box", components: { "dom-a": A, "dom-b": B, "dom-c": C } }); };
script> head> <body> <div id="box"> <dom-a>dom-a> <dom-b>dom-b> <dom-c>dom-c> div> body> html>
Vuejs 用$emit与$on来进行跨页面之间的数据传输通信
  • on和emit的事件必须是在一个公共的实例上,才能触发。
新建bus.js
import Vue from 'vue'

export var bus = new Vue()
App.vue里created方法里定义事件
import { bus } from 'bus.js'
// ...
created () {
  bus.$on('tip', (text) => {
    alert(text)
  })
}
Test.vue组件内调用
import { bus } from 'bus.js'
 // ...
bus.$emit('tip', '123')

你可能感兴趣的:(【Vue2.0-3.0点滴知识,】)