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需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
随机推荐
- C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式.
C++反汇编第五讲,认识多重继承,菱形继承的内存结构,以及反汇编中的表现形式. 目录: 1.多重继承在内存中的表现形式 多重继承在汇编中的表现形式 2.菱形继承 普通的菱形继承 虚继承 汇编中的表现形 ...
- 第03章-VTK系统概述(1)
[译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...
- webpack+babel项目在IE下报Promise未定义错误引出的思考
低版本浏览器引起的问题 最近开发一个基于webpack+babel+react的项目,一般本地是在chrome浏览上面开发,chrome浏览器开发因为支持大部分新的js特性,所以一般不怎么需要poly ...
- 【Java入门提高篇】Day7 Java内部类——局部内部类
今天介绍第二种内部类--局部内部类. 局部内部类是什么?顾名思义,那就是定义在局部内部的类(逃).开玩笑的,局部内部类就是定义在代码块.方法体内.作用域(使用花括号"{}"括起来的 ...
- 自学Zabbix3.6.5-触发器item-Unit symbols单位符号
在zabbix里面,我们不需要使用大数字来,例如我们可以不使用86400来表示一天,这个数字又不容易理解也容易出错.用什么办法来解决大数字问题呢?我们可以使用单位来简化,例如简化zabbix触发器表达 ...
- 自学Python2.6-深浅拷贝
Python 深浅拷贝 一.深浅拷贝- 数字.字符串 对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. import copy n1=123 n2=n1 # # ...
- Bandit Wargame Level18 Writeup(interactive shell and .bashrc )
Bandit Level 18 → Level 19 Level Goal The password for the next level is stored in a file readme in ...
- 开发wordpress主题
查看我的wordpress站点 第一步:下载wordpress安装包 官网下载==> 第二步:本地安装开发环境 官网给出的环境要求: 可以选择安装wamp/xampp集成PHP开发环境,安装很简 ...
- tools: idea 2017 激活
1.下载并安装ideaIU (https://www.jetbrains.com/idea/download/#section=windows ,下载Ultimate版)2.下载 JetbrainsC ...
- intellij 打开node项目 一直停留在scanning files to index....,或跳出内存不够的提示框
说明: 在npm install 后,会出现Scanning files to index ...... 出现这个是正常的,但是一直不消失就不正常了.原因是npm install 后 node_mod ...