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

最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记。

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持JavaScript中文网。


上一篇:JavaScript模拟微博发布消息
下一篇:微信小程序 开发之顶部导航栏实例代码

相关推荐

  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前
  • 面试问题:Vuejs如何实现双向绑定

    最近出去面试,栽在这个问题上,提到vuejs,面试官一般会让你说vuejs的特点,一般就要回答virtual dom tree, dom tree diff, 以及数据双向绑定,然后面试官会追问你,v...

    2 年前
  • 详解vuelidate 对于vueJs2.0的验证解决方案

    介绍 在后端项目里 比如我们的Laravel框架 对于表单验证有自己的一套validation机制 他将验证集成在FormRequest 我们只需要在我们的方法中依赖注入我们自己实例化后的验证类 ...

    3 年前
  • 详解VueJs异步动态加载块

    首先定义组件为异步加载 具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码 这种结构的好处是,页面初始化加载的时候只会加载需要的那个组件相关的内容,没切换到的那个组件不加...

    3 年前
  • 记一次爷孙组件隔代组件的通信之$emit与$on

    这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案vu...

    4 个月前
  • 用VueJS写一个Chrome浏览器插件

    浏览器基本已经天下大统了,放眼望去都是Chromium的天下。那么,能写一个浏览器插件也算是一种回报率不错的技能。 基本知识 浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要...

    1 年前
  • 深入解析VueJS源码(#1) - Vue对象构造函数

    (https://img.javascriptcn.com/d9a37890832283282fa834412d1dd24d) 这个系列呈现了详尽的VueJS探索过程,目的是去说明JS的基础概念。

    2 年前
  • 把vuejs打包出来的文件整合到springboot里

    这个需求不知道是不是合适,因为静态的vuejs项目,用nginx部署,听说很快。 一般有这个需求的,都是用tomcat来部署java项目,tomcat转发静态vuejs,应该不会很快。

    2 年前
  • 想用Vuejs突破20K必备的热门面试题之 二--九

    上篇文章只说一道题,大家是不是没有看过瘾,接下来我们来填满好奇心~~ 想用Vuejs突破20K必备的热门面试题(二)data的限制 上篇的vif和vfor是不是让大家对vue整体原理有一个更深入的了解...

    5 个月前

官方社区

扫码加入 JavaScript 社区