Vue2.0 事件发射与接收

由于vue2.0 移除了1.0中的$dispatch 和$broadcast 这两个组件之间通信传递数据的方法 ,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口.

请直接看代码,在初始化web app的时候,给data添加一个 名字为eventhub 的空vue对象

new Vue({
  el: '#app',
  router,
  render: h => h(App),
  data: {
    eventHub: new Vue()
  }
})

好的 这个时候 你就可以一劳永逸了,在任何组件都可以调用事件发射 接受的方法了.

如何获取到这个空的vue对象 eventhub呢.在组件里面直接调用这个

某一个组件内调用事件触发

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData)

另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用$off方法

this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData)=>{
    handle(yourData)
} )

遇到一个问题 ,考虑特定场景:

跳转路由之前我们调用了$emit方法,这个方法在A组件里面处理数据,但是A组件绑定$on事件之前 $emit事件已经发射,所以这会导致一直接受不到消息,看来这个事件绑定有时效性问题,你可以setTimeout来做一下延时,但是这个特别奇怪,那就把数据存到store然后等A组件加载完了再去取。。。。

官方文档请点击我

—-宇宙分割线—–

record on 12 24

在stackoverflow 发现一个更加简洁的方法,因为本质上vue是一个js对象,我们想保存一个全局对象,只需要在Vue的prototype上面增加一个属性即可,本质上所有Vue组件都是继承全局的Vue。只要在初始化Vue对象之前给原生Vue对象prototype增加属性,那样所有的组件(因为都是继承自它的实例)都可以访问到这个属性。相关资料请参考我之前的文章关于函数的构造函数和prototype<四>

在初始化Web app 之前 加上这样一句:

Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue()

当然我们可以定义其他的全局变量.比如当前app的系统配置文件,名字为sysconfig.json,你可以这样定义

Vue.prototype.$config =Vue.prototype.$config||require('path/sysconfig.json')

这样我们在组件内部 就可以直接调用$eventHub 和 $config对象了。
比如 在mounted函数里面直接 console.log($config.yourKey)

—-宇宙分割线—–

record on 1.1.2017

刚才看到了webpack的插件里面有一个definePlugin 它可以帮我们定义全局的常量。

如何使用,很简单但是更好,我们不用去修改Vue对象:

new webpack.DefinePlugin({
  CONFIG: require('path/sysconfig.json')
});

然后我们也可以在全局内使用CONFIG对象了。

转载于:https://www.cnblogs.com/dongguapifly/p/10627123.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p>本套课程适用于有一定的<span style="color: #e03e2d;">iOS、Android、Flutter</span>开发基础。</p> <p>学完本次课程,能够让大家对Flutter如何调用移动端原生页面有一个清晰的认识;在纯Flutter开发过程中遇到需要调用原生功能的时候,能够快速定制属于自己或者公司的私有插件- Plugin。</p> <p>课程一共氛围两部分:</p> <p>1、Flutter插件跟iOS的交互部分:包括调用iOS原生页面、如何使用iOS的<span style="color: #e03e2d;">framework二进制</span>、<span style="color: #e03e2d;">bundle资源文件</span>、依赖的cocoapods资源;</p> <p>2、Flutter插件跟安卓的交互部分:包括调用Android原生页面、如何接收原生页面的回调、如何使用aar文件、依赖的其他资源。</p> <p>最终能够帮助大家定制私有插件;提升工作技能。</p> <p><span style="color: #e03e2d;">备注:课程中使用环境</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures; color: #2fb41d;">[✓]</span><span style="font-variant-ligatures: no-common-ligatures;"> Flutter (Channel stable, 1.22.5, on macOS 11.0.1 20B29 darwin-arm, locale zh-Hans-CN)</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9); min-height: 14px;"><span style="font-variant-ligatures: no-common-ligatures;"> </span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures; color: #9fa01c;">[!]</span><span style="font-variant-ligatures: no-common-ligatures;"> Android toolchain - develop for Android devices (Android SDK version 30.0.3)</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #00ff00; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures;">    </span><span style="font-variant-ligatures: no-common-ligatures; color: #9fa01c;">!</span><span style="font-variant-ligatures: no-common-ligatures;"> Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures; color: #2fb41d;">[✓]</span><span style="font-variant-ligatures: no-common-ligatures;"> Xcode - develop for iOS and macOS (Xcode 12.2)</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures; color: #9fa01c;">[!]</span><span style="font-variant-ligatures: no-common-ligatures;"> Android Studio (version 4.1)</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures; color: #2fb41d;">[✓]</span><span style="font-variant-ligatures: no-common-ligatures;"> IntelliJ IDEA Community Edition (version 2020.3)</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"><span style="font-variant-ligatures: no-common-ligatures; color: #2fb41d;">[✓]</span><span style="font-variant-ligatures: no-common-ligatures;"> Connected device (1 available)</span></p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9); min-height: 14px;"> </p> <p style="margin: 0px; font-stretch: normal; font-size: 12px; line-height: normal; font-family: 'Andale Mono'; color: #2fff12; background-color: rgba(0, 0, 0, 0.9);"> </p>
<p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-size:13.5pt;font-family:'微软雅黑',sans-serif;color:#3598db;">【为什么要学习这门课】</span> </p> <p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-family:'微软雅黑',sans-serif;color:#222226;">Linux</span><span style="font-family:'微软雅黑',sans-serif;color:#222226;">创始人<span>Linus Torvalds</span>有一句名言:<span>Talk is cheap. Show me the code. </span></span><span style="font-family:微软雅黑, sans-serif;color:#e03e2d;background-color:#ffffff;">冗谈不够,放码过来!</span><span style="font-family:'微软雅黑',sans-serif;color:#222226;">代码阅读是从基础到提高的必由之路。 </span> </p> <p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-family:'微软雅黑',sans-serif;color:#222226;">YOLOv5</span><span style="font-family:'微软雅黑',sans-serif;color:#222226;">是最近推出的轻量且高性能的实时目标检测方法。<span>YOLOv5</span>使用<span>PyTorch</span>实现,含有很多业界前沿和常用的技巧,可以作为很好的代码阅读案例,让我们深入探究其实现原理,其中不少知识点的代码可以作为相关项目的借鉴。</span> </p> <p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-size:13.5pt;font-family:'微软雅黑',sans-serif;color:#3598db;">【课程内容与收获】</span> </p> <p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-family:'微软雅黑',sans-serif;color:#222226;">本课程将详细解析<span>YOLOv5</span>的实现原理和源码,对关键代码使用<span>PyCharm</span>的<span>debug</span>模式逐行分析解读。 本课程将提供注释后的<span>YOLOv5</span>的源码程序文件。</span> </p> <p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-family:'微软雅黑',sans-serif;color:#222226;"> <img src="https://img-bss.csdnimg.cn/202012061533559839.jpg" alt="课程内容" /></span> </p> <p class="MsoNormal" style="text-align:left;background:white;" align="left"> <span style="font-size:13.5pt;font-family:'微软雅黑',sans-serif;color:#3598db;">【相关课程】</span> </p> <p style="margin-left:0cm;"> 本人推出了有关YOLOv5目标检测的系列课程。请持续关注该系列的其它视频课程,包括: </p> <p> 《YOLOv5(PyTorch)目标检测实战:训练自己的数据集》 </p> <p> Ubuntu系统 <strong><a href="https://edu.csdn.net/course/detail/30793"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/30793</span></a></strong> </p> <p> Windows系统 <strong><a href="https://edu.csdn.net/course/detail/30923"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/30923</span></a></strong> </p> <p> 《YOLOv5(PyTorch)目标检测:原理与源码解析》<strong><a href="https://edu.csdn.net/course/detail/31428"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/31428</span></a></strong> </p> <p> 《YOLOv5(PyTorch)目标检测实战:Flask Web部署》<strong><a href="https://edu.csdn.net/course/detail/31087"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/31087</span></a></strong> </p> <p> 《YOLOv5(PyTorch)目标检测实战:TensorRT加速部署》<strong><a href="https://edu.csdn.net/course/detail/32303"><span style="color:#7c79e5;">https://edu.csdn.net/course/detail/32303</span></a></strong> </p>
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页