vuejs单一事件管理组件间的通信
2024-10-18 20:21:07
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
// 单一事件管理
var Event = new Vue(); // A组件发送数据
var A = {
data() {
return {
a: '我是a数据'
}
},
template: `
<div>
<span>{{a}}</span>
<button @click="send">我是组件a</button>
</div>
`,
methods: {
send() {
Event.$emit('data-a', this.a)
}
}
}; // B组件发送数据
var B = {
data() {
return {
b: '我是b数据'
}
},
template: `
<div>
<span>{{b}}</span>
<button @click="send">我是组件b</button>
</div>
`,
methods: {
send() {
Event.$emit('data-b', this.b)
}
}
}; // C组件接受数据
var C = {
data() {
return {
a:'',
b:''
}
},
template: `
<div>
<span>{{a}}</span>
<span>{{b}}</span>
</div>
`,
mounted() {
Event.$on('data-a',function(data){
this.a = data
}.bind(this));
Event.$on('data-b',function(data){
this.b = data
}.bind(this)); }
}; window.onload = function() {
var app = new Vue({
el: '#box',
components: {
'com-a': A,
'com-b': B,
'com-c': C
}
})
}
</script>
</head> <body>
<!-- 组件间得通信管理 -->
<div id="box">
<div>
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</div>
</body> </html>
定义了一个全局对象，组件把数据发送出去，任何组件都可以接收到数据
最新文章
- NSIS 打包脚本基础
- html 超文本标记语言
- 【USACO 2.4】Overfencing（bfs最短路）
- Android TelephonyManager电话管理器
- [URAL]刷题记录表
- Inno Setup使用技巧
- PHP防止页面刷新、重复提交数据
- 55. Jump Game
- 关于如何实现程序一天只启动一次的想法(C++实现)
- 如何在settings里的休眠模式里添加永不休眠
- node.js stream
- Map，HashMap,TreeMap
- Mybatis插件原理分析（一）
- 【转载】Sqlserver数据库中无自增Id的情况下使用ROW_NUMBER()函数进行数据分页
- 在JavaScript中，如何判断数组是数组？
- Mybatis---架构图
- 练习八 spool导出
- LVM操作
- 给hmailserver添加SSL支持
- JQuery动态给table添加、删除行 改进版