vue:简单方法替代vuex或者bus
兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点。
vuex: 适合数据量大,并且函数集中处理。
bus:适合数据虽少,却不得不用的时候,维护困难。
root:这儿指将值挂在root组件上,需要的组件都到root上去取。
有时候数据量不多,觉得引入vuex又使得项目变得沉重,使用全局bus又显得不好维护,使用跟组件更是感觉跟理念不符合。
store:这就是介绍的简单方法。详细如下
需了解: 1、import 引入文件是引用的地址,并不是将数据复制一份,就是说该变了数据后,原文件的数据会发生变化。可以利用这个特性来传递数据。
2、data里挂载的数据是动态绑定的。
3、引入的一定是个对象。
// store.js
export default {
a: 1,
b(val) {
console.log(val)
}
}
// 需要使用公用数据的 组件
import store from './store.js'
export default {
data() {
return { store }
},
}
store里的方法可以当methods里面的方法使用。任何组件改变了store里的值,所有组件store里的值都会发生改变。
vue:简单方法替代vuex或者bus的更多相关文章
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- 浅谈vuex使用方法(vuex简单实用方法)
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- 定义了一个vue全局方法,不能再vuex中进行调用
你把函数定义在 Vue 的原型链上,只能在 Vue 的实例里才能取到这个方法. vue组件 是一个Vue 的实例,所以你当然能在这里调用到 ajax 方法. 而,vuex 只是一个 vue插件,在 v ...
- vue(2)—— vue简单语法运用,常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue简单总结
首先 介绍几个常见指令 指令:以属性的形式出现在标签上 v-xxx 1.内置指令 数据绑定指令 v-html v-text 举例 <span v-html="msg" ...
- vue创建状态管理(vuex的store机制)
1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
随机推荐
- Chrome浏览器读写系统剪切板
IE浏览器支持直接读写剪切板内容: window.clipboardData.clearData(); window.clipboardData.setData('Text', 'abcd'); 但是 ...
- .NET版支付宝商户会员卡接入
最近公司计划对接支付宝会员卡功能,而任务恰巧由领导安排给我这边,小弟之前也未做过支付宝接口,研究了三天,终于将支付宝会员卡API接口大体上调通了,现将其整理下,以供参考. 蚂蚁金服开发平台-商户会员卡 ...
- Codeforces 869C The Intriguing Obsession
题意:有三种颜色的岛屿各a,b,c座,你可以在上面建桥.联通的点必须满足以下条件:1.颜色不同.2.颜色相同且联通的两个点之间的最短路径为3 其实之用考虑两种颜色的即可,状态转移方程也不难推出:F[i ...
- PHP 使用Echarts生成数据统计报表
echarts统计,心血来潮~~ 先看下效果图 看下代码 HTML页面 为ECharts准备一个Dom,宽高自定义 <div class="panel panel-info" ...
- Ubuntu1204 vim中文乱码解决方法
加入中文字符编码 sudo vi /var/lib/locales/supported.d/local #加入以下的中文字符集 zh_CN.GBK GBK zh_CN.GB2312 GB2312 zh ...
- 利用java mail发送邮件(转)
JavaMail是SUN提供给开发者在应用程序中实现邮件发送和接收功能而提供的一套标准开发类库,支持经常使用的邮件协议,如SMTP.POP3.IMAP.开发者使用JavaMail编写邮件程序时,无需考 ...
- JAVA入门[20]-Spring Data JPA简单示例
Spring 对 JPA 的支持已经非常强大,开发者只需关心核心业务逻辑的实现代码,无需过多关注 EntityManager 的创建.事务处理等 JPA 相关的处理.Spring Data JPA更是 ...
- 十四、Spring Boot 日志记录 SLF4J
在开发中打印内容,使用 System.out.println() 和 Log4j 应当是人人皆知的方法了. 其实在开发中我们不建议使用 System.out 因为大量的使用 System.out 会增 ...
- AJAX扩展-POST传递参数并跳转页面
拓展的代码: 这段代码的原理是创建一个表单,所有args都创建一个隐藏的input,用post方法把这些参数传递过去 注意form表单一定要加载到页面中,即下面代码中标红的部分,不然参数是无法被传递的 ...
- MyBatis:lazy loading
懒加载的原理 mybatis 会循环处理结果集中返回的每行数据的,在处理之前首先会通过反射调用构造方法来创建 result 对象,结果集中的一行数据最终会映射为一个 result 对象(严格的来说是不 ...