Vuejs 用$emit与$on来进行数据传输通信

时间：2021-07-09 16:08:51
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')
标签：

相关文章