编程 Javascript

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

Posted in Javascript onFebruary 23, 2017

最近在学习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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

LiuYier

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 密码强度验证规则、打分、验证（给出前端代码，后端代码可根据强度规则翻译）

May 18 Javascript

Jquery插件写法笔记整理

Sep 06 Javascript

jquery实现简单合拢与展开网页面板的方法

Sep 01 Javascript

js倒计时抢购实例

Dec 20 Javascript

AngularJS 使用$sce控制代码安全检查

Jan 05 Javascript

深入理解AngularJS中的ng-bind-html指令和$sce服务

Sep 08 Javascript

jQuery居中元素scrollleft计算方法示例

Jan 16 Javascript

JavaScript通过filereader接口读取文件

May 10 Javascript

微信小程序支付功能（前端）的实现

May 24 Javascript

Vue 通过自定义指令回顾v-内置指令(小结)

Sep 03 Javascript

Vue CLI3基础学习之pages构建多页应用

Jun 02 Javascript

Webpack3+React16代码分割的实现

Mar 03 Javascript

微信小程序开发之顶部导航栏实例代码

Feb 23 #Javascript

jQuery中绑定事件bind() on() live() one()的异同

Feb 23 #Javascript

js实现简单的选项卡效果

Feb 23 #Javascript

Vue-resource实现ajax请求和跨域请求示例

Feb 23 #Javascript

jQuery事件详解

Feb 23 #Javascript

Vue2学习笔记之请求数据交互vue-resource

Feb 23 #Javascript

JavaScript基本类型值-Undefined、Null、Boolean

Feb 23 #Javascript