Vue2单一事件管理组件通信

作者：scorpio_h 时间：2024-05-29 22:30:03　

本文为大家分享了vue $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>

标签：Vue2,vue,组件通信

投稿

Vue2单一事件管理组件通信

猜你喜欢

PyTorch学习笔记之回归实战

Jupyter notebook 更改文件打开的默认路径操作

基于python实现图书管理系统

php笔记之：初探PHPcms模块开发介绍

Golang常用环境变量说明与设置详解

python3 中的字符串（单引号、双引号、三引号）以及字符串与数字的运算

解决python2.7 查询mysql时出现中文乱码

SecureCRTSecure7.0查看连接密码的步骤

Python函数默认参数设置的具体方法

JavaScript中随机数方法 Math.random()

Python实现批量修改xml文件的脚本

python实现简单多人聊天室

Python制作豆瓣图片的爬虫

python tkinter实现弹窗的输入输出

pytorch中的自定义反向传播,求导实例

python简单实现插入排序实例代码

mysql 5.7.18 免安装版window配置方法

Python爬虫之UserAgent的使用实例

如何检测用户第一次访问我的网站并显示友好信息？

使用豆瓣源来安装python中的第三方库方法