【vue】用$emit与$on来进行数据传输通信

最新推荐文章于 2022-07-06 11:43:06 发布

厨樱

最新推荐文章于 2022-07-06 11:43:06 发布

阅读量304

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://blog.csdn.net/sinat_17775997/article/details/74178119?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.none

版权

vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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来进行跨页面之间的数据传输通信

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

厨樱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【vue】用$emit与$on来进行数据传输通信

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">
复制链接

扫一扫

专栏目录