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

时间: 2018-04-24阅读: 5774标签: 通信

每个 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

JavaScript 如何实现同源通信?

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

javascript 通信协议

javascript 通信协议是一个伪协议, 用于指定 URL 为 JavaScript 代码,对于 Chrome 浏览器来说, 如果最后一条 JavaScript 语句的值为字符串

基于 ThinkJS 的 WebSocket 通信详解

我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架

Vue3使用mitt进行组件通信的步骤

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

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

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

Socket是如何通信的?

其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理

Angular组件之间通信

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

前端跨页面通信,你知道哪些方法?

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

如何与 Service Worker 通信

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

点击更多...

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