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需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
随机推荐
- Mysql服务器SQL模式 (官方精译)
MySQL服务器可以在不同的SQL模式下运行,并且可以根据sql_mode系统变量的值对不同的客户端应用不同的模式.DBA可以设置全局SQL模式以匹配站点服务器操作需求,并且每个应用程序可以将其会话S ...
- zuul超时的解决方案
参考http://www.coolxuewang.com/view/10 在zuul的配置文件里增加如下配置: ribbon: ConnectTimeout: 6000 ReadTimeo ...
- javascript设计模式——享元模式
前面的话 享元(flyweight)模式是一种用于性能优化的模式,“fly”在这里是苍蝇的意思,意为蝇量级.享元模式的核心是运用共享技术来有效支持大量细粒度的对象.如果系统中因为创建了大量类似的对象而 ...
- C#换行 System.Environment.NewLine。
为保持平台的通用性,可以用系统默认换行符 System.Environment.NewLine.
- ElasticSearch 学习记录之集群分片内部原理
分片内部原理 分片是如何工作的 为什么ES搜索是近实时性的 为什么CRUD 操作也是实时性 ES 是怎么保证更新被持久化时断电也不丢失数据 为什么删除文档不会立即释放空间 refresh, flush ...
- day6、Linux下如何找出7天以前的文件删除
有些时候,由于系统产生的日志文件,使服务器的磁盘空间紧张,所以怎么删除7天以前的日志文件及让系统只保留7天以内的日志文件 方法一 使用命令:find + |xargs + ls 命令方法:find / ...
- UVA - 11082 Matrix Decompressing(最大流+行列模型)
题目大意:给出一个R行C列的矩阵,如今给出他的前1-R行和 && 前1-C列和,问这个矩阵原来是如何的,要求每一个元素大小在1-20之间 解题思路:将每一行连接到超级源点,容量为该行的 ...
- B. Simple Game( Codeforces Round #316 (Div. 2) 简单题)
B. Simple Game time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- jdk动态代理举例
JDK动态代理是基于接口的代理,下面举例说明 代理类:proxy,代理动作必须要基于一个proxy实例来执行 代理执行类:实现InvocationHandler,案例中是TestInvocationH ...