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

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. lnmp1.3 配置pathinfo---thinkphp3.2 亲测有效

    lnmp1.3环境下配置pathinfo模式试了很多方法,都以失败告终,博主被这个问题困扰了很久,终于解决了!现记录如下: 1.打开php.ini 通常该文件在 /usr/local/php/etc/ ...

  2. “use strict” 严格模式使用(前端基础系列)

    ECMAscript5添加一种严格模式的运行模式("use strict"),让你的js语句在更加严格的环境下进行运行: 一.主要作用: 消除版本javascript中一些不合理及 ...

  3. Xcode 7 你能不能再抗扎腾点儿呢 - 尤其自个儿强制升级后,没事儿就关闭

    Xcode 7 你能不能再抗扎腾点儿呢 - 尤其自个儿强制升级后,没事儿就关闭 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用 ...

  4. js清除cookie有时无法清除

    最近写页面遇到一个问题,退出的时候需要清除cookie,但是刚开始一直清除不掉,代码如下: //清除函数 function delCookie(name) { var date= new Date() ...

  5. windows7 创建http 服务器

    利用windows7 操作系统自带的功能创建http 服务器 方法/步骤     打开控制面板--程序---开启和关闭windows功能.   选择IIS(internet information S ...

  6. git 设置和取消代理

    # 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...

  7. linux定时器crontab

    linux定时器crontab用法: 1.基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示 ...

  8. ES6之Class

    ES6中的Class和JS的比起来无疑是让对象原型的写法更加清晰,更像面向对象编程的语法而已,注意一个问题ES6里面的Class的内部定义的所有方法都是不可枚举的,而且在ES6中Class不存在变量提 ...

  9. iOS 多线程 简单学习NSThread NSOperation GCD

    1:首先简单介绍什么叫线程 可并发执行的,拥有最小系统资源,共享进程资源的基本调度单位. 共用堆,自有栈(官方资料说明iOS主线程栈大小为1M,其它线程为512K). 并发执行进度不可控,对非原子操作 ...

  10. cocoapods安装说明,最快安装,以及使用

    安装卸载更新新推荐 文章最后 其他问题总结: 1 添加taobao提供的镜像地址:http://ruby.taobao.org/ 移除命令:gem sources --remove https://r ...