Vue2单一事件管理组件通信
时间:2019-03-30
本文章向大家介绍Vue2单一事件管理组件通信,主要包括Vue2单一事件管理组件通信使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Intent 属性详解(上)
- 复仇行动:Notepad++官网被圣战组织黑了
- 四大组件的纽带——Intent
- 利用HTC One漏洞破解手机PIN密码
- Android NDk环境配置
- 谷歌再曝Windows8.1漏洞,微软怒了
- Python机器学习的生态系统
- TP-link TL-WR840N系列路由器存在CSRF漏洞,可修改任意配置(含POC测试过程)
- JavaScript严格模式
- 微软修复8个安全漏洞,包括谷歌披露的0day漏洞
- PullToRefreshScrollView 嵌套RecyclerView实现特卖列表倒计时抢购
- 全栈数据工程师养成攻略:Python 基本语法
- 从卷积神经网络的角度看世界
- 外观模式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法