vue.js $emit/$on的用法和理解_vue组件之间数据传输通信

更新日期: 2018-04-24阅读量: 5913标签: 通信

每个 vue 实例都实现了事件接口

vm.$on( event, callback ):监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit( event, […args] ):触发当前实例上的事件。附加参数都会传给监听器回调。

  

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

<!DOCTYPE html>
<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: `
      <div>
        <span>我是A组件的数据->{{a}}</span>
        <input type="button" value="把A数据传给C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("a-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是a组件中数据"
      }
    }
  };
  //组件B
  var B = {
    template: `
      <div>
        <span>我是B组件的数据->{{a}}</span>
        <input type="button" value="把B数据传给C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("b-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是b组件中数据"
      }
    }
  };
  //组件C
  var C = {
    template: `
      <div>
        <h3>我是C组件</h3>
        <span>接收过来A的数据为: {{a}}</span>
        <br>
        <span>接收过来B的数据为: {{b}}</span>
      </div>
    `,
    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来进行跨页面之间的数据传输通信

新建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')

备注:on和emit的事件必须是在一个公共的实例上,才能触发。


总结:

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on。  

父组件可以使用 props 把数据传给子组件;子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件;vm.$on( event, fn );//监听event事件后运行。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/705

Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props

如何与 Service Worker 通信

Service Worker 很棒。它们使 Web 开发人员可以实现以前原生应用专有的类似功能。这类功能是例如推送通知或后台同步的离线功能。它们是渐进式 Web 应用的核心。但是在设置它们之后

Vue3.x 推荐使用 mitt.js

比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖 Vue 实例,所以可以跨框架使用,React 或者 Vue,甚至 jQuery 项目都能使用同一套库。

JavaScript 如何实现同源通信?

在日常工作中,你可能会遇到同源页面间通信的场景。针对这种场景,我们可以使用 localStorage 和 storage 事件来解决同源页面间通信的问题。除此之外,我们还可以使用 Broadcast Channel API 来解决该问题

vue父子组件通信高级用法

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式

微信小程序8种数据通信的方式

数据通信在开发中是必不可少的一个环节,也是我们必须掌握的知识。知道得越多的数据通信方式,实现业务会更加得心应手,下面我将这些通信方式归类介绍:

两个html窗口间利用JavaScript通信

场景:当A页面打开B页面,在B页面操作后,A页面需要同步变更数据时,如果是需要A打开B的同时向B中发送数据时

vue中使用v-model完成组件间的通信

如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。

Angular组件之间通信

特别需要注意: 这个公共服务需要在同一个注册器下,比如在root注册器下,如果不在可能会出现订阅不到的问题

Vue组件间通信方式都有哪些?

都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件,通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上,任何信息的交通都是通信

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!