vue再次入手(数据传递②)
接上篇~
5.最后一种,互通:无所谓父组件或者是子组件,而是随时随地都能调用到数据的一种方法。便是利用vuex来管理数据,官网描述:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
可以理解为vuex为全局的数据管理系统。最核心的几步操作:
在vuex文件夹下新建store.js文件,
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({
// 定义状态
state: {
owner: 'Han Meimei'
},
mutations:{
newOwner(state,msg){
state.owner = msg;
}
}
}); export default store;
在状态存储系统中保存一个名为”owner”的状态;
footer.vue:
header.vue:
最终在父组件App.vue中调用:
实现效果:
后序:
刚开始接触vue的时候,就知道vuex是全局存储数据状态的管理系统,但是在潜意识中总是告诉自己,这个貌似很复杂,不太好理解。再加之工作中也没用到vuex组件,于是也就将其搁置了,直到现在在重新拾起来好好学习的时候,才意识到它并没有想象当中的“难”。
或许,一直拥有“初生牛犊不怕虎”的精神会做成很多“大事”。
vue再次入手(数据传递②)的更多相关文章
- vue再次入手(数据传递①)
准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...
- vue.js之数据传递和数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- Vue自定义指令 数据传递
在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- vue 组件中数据传递
//有种形式的传递:从父到子,从子到父,平行级别的传递//首先第一种:从父到子,用props属性绑定 //父级数据: new vue({ "el":"#app" ...
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- VUE组件2数据传递
传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
随机推荐
- 电源PI相关知识讲解
电源层与地线层的谐振控制 一旦PCB的电源与地层的形状.距离以及中间介质定下来以后,发生谐振的频率也就定下来了. 采用LC等效电路,不考虑PCB上的损耗,而这些损耗往往在高频影响尤为明显,例如趋肤效应 ...
- Numpy 利用数组进行数据处理
Numpy数组使你可以将许多种数据处理任务表述为简洁的数组表达式(否则需要编写循环). 用数组表达式代替循环的做法,通常被称为矢量化.一般来说,矢量化数组运算要比等价的纯跑一趟湖南快 上一两个数量级( ...
- e864. 取的显示器大小尺寸
See also e670 缓冲图像转换为图像. try { Robot robot = new Robot(); // Capture a particular area on the screen ...
- lua----------------使用VS2015搭建lua开发环境的一些侥幸成功经验,
所以本篇博文介绍在Windows平台下,使用VS2015搭建lua开发环境的一些侥幸成功经验,安装过程参考网上教程,安装过程如下(参考http://www.byjth.com/lua/33.html) ...
- (实用)将wordpad添加到Windows PowerShell中
PowerShell能够直接打开notepad,但是无法调用wordpad,因为后者的可执行文件并不在系统默认的环境变量$env:Path中,只要将wordpad所在的路径添加到$env:Path,就 ...
- 如何使用 OpenFileDialog 组件 (选择文件组件)
向程序设计窗体中添加一个OpenFileDialog控件,在属性对话框中设置其Filter属性为 "所有文件(*.*)|*.*|文本文件(*.txt)|*.txt|WPS文档(*.w ...
- 如何让Snippet Compiler 2008 支持linq
转载自:http://www.cnblogs.com/hbb0b0/archive/2009/09/01/1557832.html 注意,下面的图和上面的图,有些不同 上面是在 FileSystem ...
- tracert
TRACERT命令 编辑 Tracert(跟踪路由)是路由跟踪实用程序,用于确定 IP数据包访问目标所采取的路径.Tracert 命令使用用 IP 生存时间 (TTL) 字段和 ICMP 错误消息来确 ...
- Linux下yum命令详解
yum是什么yum = Yellow dog Updater, Modified主要功能是更方便的添加/删除/更新RPM包.它能自动解决包的倚赖性问题.它能便于管理大量系统的更新问题yum特点 可以同 ...
- Sql Server Snapshot和mysql MVCC
mysql 在一个事务A中插入一条数据 在B事务中查询到的还是以前的数据,可以select *from table,不被锁住 Sql Server 默认级别 读已提交 所以A事务在 X表插入数据, ...