vuex

eventBus 是在轻量级的vue项目中 使用的一种通信方式，通过定义一个全局变量，实现数据互通，和vuex类似 1、在main.js中定义全局$eventbus Vue.prototype.$EventBus = new Vue() 2、定义变量 this.$EventBus.$emit("params_demo",{ num: this.num, deg: this.deg }); 3、访问变量 this.$EventBus.$on("params_demo", ({num, deg}) => { console.log(num,deg) }) 来源： oschina 链接： https://my.oschina.net/bing309/blog/4330830

相信大家在工作中一定遇到过多层嵌套组件，而vue 的组件数据通信方式又有很多种。 比如 vuex、$parent与$children、prop、$emit与$on、$attrs与$lisenters、eventBus、ref 。 今天主要为大家分享的是 provide 和 inject 。 很多人会问，那我直接使用vuex不就行了吗？ vuex固然是好！ 但是，有可能项目本身并没有使用vuex的必要，这个时候 provide 和 inject 就闪亮登场啦～ 使我们开发的时候，如有神助～ 官方解释 provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property 。 inject 可以是一个字符串数组、也可以是一个对象 说白了，就是 provide 在祖先组件中注入， inject 在需要使用的地方引入即可。 我们可以把依赖注入看做一部分大范围的 prop ，只不过它以下特点： 祖先组件不需要知道哪些后代组件使用它提供的属性 后代组件不需要知道被注入的属性是来自那里 注意：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。 实例 目录结构 祖先 index.vue <template> <div class= "grandPa" > 爷爷级别 :

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属） 针对以上关系我们归类为： 父子组件之间通信 非父子组件之间通信(兄弟组件、隔代关系组件等) 本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式，希望可以帮助小伙伴们更好理解组件间的通信。 一、 props / $emit 父组件通过 props 的方式向子组件传递数据，而通过 $emit 子组件可以向父组件通信。 1. 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据：在子组件 article.vue 中如何获取父组件 section.vue 中的数据 articles:['红楼梦', '西游记','三国演义'] // section父组件 < template > < div class = "section" > < com -

我一直想做一个网页应用，奈何没有系统学习过前端，直到后来我接触到腾讯云无服务器云函数 SCF，让前端可以快速获得后端的能力同时，一并解决了前端数据请求跨域的问题。 本文来自 Serverless 社区用户「乂乂又又」供稿 没错，云函数 SCF 就是那种一旦用了就无法回到原来那种神奇的东西，让人不禁感叹为什么没有早点遇到 SCF 然后我花了大概一天的时间编写调试上线发布云函数（应用后端），然后又用了一天的时间学了下前端，主要是确定要用到的技术栈（后面我会再讲到这个问题），然后第三天正式开始开发应用，将云函数引入前端调用，测试数据，调整布局，打包网页发布到 coding pages。 所以在我是一个前端初学者的背景下，前后仅花了大概三天的时间，就完成了这样一个比较简单的网页应用 这就是 Severless 的魅力所在，它可以让你快速开发上线全栈应用，无论你是前端或是后端开发者都可以获益许多。 效果展示 首页 视频播放页 更详细的体验可访问 https://wo-cao.cn/ ，仅做测试之用，不要乱搞哦~ 是不是有点跃跃欲试涅？让我们开始吧~ 前端部分 由于初涉前端，前端丰富得让人眼花缭乱的生态让我花费了一整天的时间来确定所要用的框架。 这里大体说下我用到的前端技术栈，帮助小伙伴快速进入实际开发状态，不要像我这个前端小白一样在框架的选择上耗费太多时间 需求 第三方库 html预编译

abp框架Excel导出——基于vue 目录 abp框架Excel导出——基于vue 1.技术栈 1.1 前端采用vue，官方提供 1.2 后台是abp——aspnetboilerplate 2. Excel导出需求 3. 升级日志Excel导出 4. 技术实现方案 4.1 后台 4.1.1 EPPlus导出静态方法 4.1.2 生成升级日志列表 4.1.3 将升级日志列表放到Excel导出静态方法中去 4.1.4 abp框架中前后端分离模式文件流传输 4.2 前端 4.2.1 vuex的action中添加请求方法 4.2.2 upgradeLog.vue升级页面 4.2.2.1 增加下载方法 4.2.2.2 点击导出报表按钮调用下载方法 5. 最终效果 5.1 点击按钮 5.2 报表展示 6.小结 1.技术栈 1.1 前端采用vue，官方提供 UI套件用的是iview 1.2 后台是abp——aspnetboilerplate 即abp v1， https://github.com/aspnetboilerplate/aspnetboilerplate。 下载时选择的是net core 3.1。 2. Excel导出需求 管理后台系统，主要以图表统计形式归档数据，用户经常会有Excel导出报表的需求。可以以文件形式保存，更加地直观，符合使用习惯。 3. 升级日志Excel导出

　　首先我们要知道什么是vuex，请看官方的解释： “Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。” 　　是不是看完了也是一头雾水，那就对了，因为官方的解释，都是在用一个概念解释另一个概念。所以，看完了解释，初学者不明白很正常。姑且把这段话放在这里，不用着急理解他，只要知道有这么回事就行。 　　我自己理解的vuex，就是vue给提供的一个 官方的 ， 响应式的 ， 全局的 ， 按照自己的规则调用的 ，相当于html5中的storage的一样的插件。 　　官方：这个就不用解释了。 　　全局的：这个就和storage一样了，你只要在main.js全局注册了，那么任何一个组件，咱们都可以直接调用。 　　响应式的：这个就是说，只要我们在任意组件改变这个里面的变量，而后，vue会响应式的把所有的组件中用到这个变量的组件更新； 　　按照自己的规则调用：这个就是说，这个组件，既然是响应式的，那么我们想要更改一个变量，需要按照官方给定的方式来更改； 废话不多说，直接看代码： 　　 1 // store中的index.js文件

权限管理思路讲解 有关后台管理系统之前写过五篇博客,看这篇之前最好先看下这五篇博客。另外这里只展示关键部分代码，项目代码放在github上： mall-manage-system 1、 Vue + Element-ui实现后台管理系统(1) --- 总述 2、 Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现 3、 Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能 4、 Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路 5、 Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件 这篇主要讲解权限相关的功能： 整体效果 admin用户看到的菜单 xiaoxiao用户看到的菜单 可以发现不同的用户所看到侧边栏的菜单是不一样的。 简单来讲大致需要满足的功能就是： 1、不同的用户会根据权限不同，在后台管理系统渲染不同的菜单栏。 2、用户登陆之后,会获取路由菜单和一个token,之后跳转的页面都需要带着token。 3、用户退出登陆,清除动态路由,清除token。跳转到login页面。 4、如果当前没有token，那么跳转到任何页面都应该重定向到login页面。 一、权限管理代码思路讲解 1、登陆所做的事情

又双叒一个uniapp组件 最近有一个选择地址的需求，就写了一个省市区联动选择器。 选择日期使用的picker,就照着它简单的整了一个,使用网络请求城市数据，还用到了vuex组件数据共享。 本来自己整了一个底部弹窗， 又在插件市场看到了更好的底部弹窗 :LuPopupWrapper--弹窗容器 ， 所以就用了这个。 依然发布到了插件市场： http://ext.dcloud.net.cn/plugin?id=708 看一下效果吧 具体实现 css就不贴出来了，下载可以看到。 第一、底部弹出框 < view class ="popup-layout-wrap" :class ="popuplayoutClass" > <view class="popup-layout-content" :class="popupContentClass" :style="[{height:height}]"> < slot > </ slot > </ view > < view v-if ="maskShow" class ="popup-layout-mask" @tap ="close(maskClick)" ></ view > </ view > 这里的底部弹出框用了插件市场的，简单的看一下布局。 slot插槽用于填充弹出框的内容。 最主要的就是弹出和关闭。属性就一个height

简而言之，如果vuex state 中是一个对象 {}，那么监听就会有问题。先给出解决方案： // 超简易拷贝（如果是深拷贝还多此一举把get/set拷贝进去了，所以用简易拷贝即可） let __VALUE__ = JSON.parse(JSON.stringify(state.problemReply)) // 加入部门回复详情 __VALUE__[orderId] = data.problemReply // 更新，只能这样一波骚操作才能让computed和watch监听到。具体原因我稍后学习o(╥﹏╥)o。 state.problemReply = __VALUE__ 来源： oschina 链接： https://my.oschina.net/u/4363105/blog/4313441

VUE学习目录汇总 一、vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟俺一起全面入坑 03 “Vue2.0”跟俺一起全面入坑 —— 自定义便签 超好用的VueJs调试工具——vue-devtools Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli） Vue2.0史上最全入坑教程（中）—— 脚手架代码详解 Vue2.0史上最全入坑教程（下）—— 实战案例 Vue2.0史上最全入坑教程（完）—— 实战案例 vue-cli中配置sass 和 利用SASS函数功能实现px转rem 二、vue提高 Vue2.0生命周期和钩子函数的一些理解 ===》 推荐 用webpack（2.x语法）手动搭建Vue项目 全面解析vue-cli生成的项目中使用其他库（js库、css库） Vuex从入门到入门 ===》 大中型项目复杂逻辑会用到 Vuex从入门到熟练使用 Vuex从入门到熟练使用 vue与服务端通信—vue-resource vue开发过程中跨域最简单解决方案 富文本编辑器Ueditor如何在Vue中使用？ 三、vue 1.x和vue 2.x的区别 到了Vue2.x有哪些变化？—— 知识点 到了Vue2.x有哪些变化？—— 组件通信 四、其他必备知识点 ES6入门（一） ES6快速入门（二） ES6快速入门