兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点。

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的更多相关文章

  1. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. 浅谈vuex使用方法(vuex简单实用方法)

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...

  3. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  4. 定义了一个vue全局方法,不能再vuex中进行调用

    你把函数定义在 Vue 的原型链上,只能在 Vue 的实例里才能取到这个方法. vue组件 是一个Vue 的实例,所以你当然能在这里调用到 ajax 方法. 而,vuex 只是一个 vue插件,在 v ...

  5. vue(2)—— vue简单语法运用,常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  6. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  7. vue简单总结

    首先  介绍几个常见指令 指令:以属性的形式出现在标签上 v-xxx 1.内置指令 数据绑定指令  v-html v-text    举例 <span v-html="msg" ...

  8. vue创建状态管理(vuex的store机制)

    1:为什么说要是永远状态管理 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题.(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作 ...

  9. Vue组件间通信-Vuex

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...

随机推荐

  1. vue.js初学,笔记1,安装

    最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...

  2. win10解决乱码问题

    Unicode是Unicode.org制定的编码标准,目前得到了绝大部分操作系统和编程语言的支持.Unicode.org官方对Unicode的定义是:Unicode provides a unique ...

  3. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  4. svn文件回滚到某个历史版本号

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50819642 本文出自[我是干勾鱼的博客] 有时候想要将svn中的某个文件回滚到 ...

  5. hdu 5078 Osu! (2014 acm 亚洲区域赛鞍山 I)

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=5078 Osu! Time Limit: 2000/1000 MS (Java/Others)     ...

  6. kotlin web开发教程【一】从零搭建kotlin与spring boot开发环境

    IDEA中文输入法的智能提示框不会跟随光标的问题 我用的开发工具是IDEA 这个版本的IDEA有一个问题: 就是中文输入法的智能提示框不会跟随光标 解决这个问题的办法很简单,只有在安装目录下把JRE文 ...

  7. laravel会话驱动扩展—连接自定义会话管理系统

    laravel 版本:5.3.* 用laravel开发公司信息系统过程中,由于业务或安全问题的考虑,会有一些特殊的用户会话管理方面的需求,如多个子系统会话统一管理或A系统业务操作导致B系统中某些在线用 ...

  8. TCP/IP、HTTP、HTTPS、HTTP2.0

    TCP/IP.HTTP.HTTPS.HTTP2.0 HTTP,全称超文本传输协议(HTTP,HyperText Transfer Protocol),是一个客户端和服务器端请求和应答的标准(TCP), ...

  9. 浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案

    项目中有用到文件下载功能,之前在处理下载时对IE浏览器下文件下载名进行过处理,测试也没有问题,但是功能上线后,业务反馈IE11文件下载文件名依然乱码.打印User-Agent字符串如下: IE11 U ...

  10. python_web----------数据可视化从0到1的过程

    一.数据可视化项目配置 1. django + Echarts 2. 服务器(linux:Ubuntu 17.04 (GNU/Linux 4.10.0-40-generic x86_64)) 3. I ...