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需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
随机推荐
- Windows_server_2012-r2_x64安装教程
版本: Windows_server_2012-r2_x64 工具: VMware vSphere Client 镜像地址: http://www.xpgod.com/soft/10718.html( ...
- Map Task内部实现分析
上篇我刚刚学习完.Spilt的过程,还算比較简单的了,接下来学习的就是Map操作的过程了,Map和Reduce一样.是整个MapReduce的重要内容,所以.这一篇,我会好好的讲讲里面的内部实现过程. ...
- gsp页面标签
gsp--Groovy Servers Pages <g:actionSubmit value=""/> 提交button <g:actionSubmit act ...
- zephyr初始化流程
1.调用应用层main()函数 kernel/init.c 181行 /** * * @brief Mainline for kernel's background task ...
- 自学Zabbix3.10.1.1-事件通知Notifications upon events-媒介类型email
自学Zabbix3.10.1.1-事件通知Notifications upon events-媒介类型email 配置媒介Email Administration→Media types->Cl ...
- web前端开发 --好多视频大集合--文化的传播者-杜恩德
提醒: 如果需要的话,尽快保存,说不定哪天分享就消失了呢. 1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端 ...
- tomcat启动端口号报错java.net.BindException: Cannot assign requested address
异常信息 时间:2017-02-09 15:09:59,829 - 级别:[ERROR] - 消息: [other] Failed to start end point associated with ...
- 【java】实现Interface java.lang.Comparable<T>接口的int compareTo(T o)方法实现对象数组或链表或集合的排序,和挽救式对象比较器Interface java.util.Comparator<T>
package 对象比较排序; import java.util.Arrays; class A implements Comparable<A>{ private String name ...
- 【十八】php文件下载源码
index.php <!DOCTYPE html> <html> <head> <title></title> <meta chars ...
- web基础笔记整理(一)
一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...