Vue兄弟组件(非父子组件)传值、状态共享
前言:网上大部分文章写的有点乱,很少有讲得易懂的文章。
所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =。=
-
- 作者:X1aoYE
- 备注:转载请注明~ 内容里的<br>请无视。。
关键字:Vue、非父子组件、兄弟组件、传值、共享状态
- 应用例子:
- 主题颜色更换
- 购物车传值
- 就像名字所说的兄弟组件传值,自己理解其他例子了哈~
- 小型项目:
推荐使用 global event bus (事件总线) ,不然小项目里用 Vuex 相对来说会挺繁琐
步骤:
1. 新建一个 bus.vue (只是个 .vue ,不用想太多)
import Vue from 'vue' //import一个vue类
export const bus = new Vue() //实例化并将它export
2. 使用
import { bus } from 'bus.js' // 其他代码~ bus.$emit('myEvent', 'this.mydata')
// 其他代码~ // 解释:bus.$emit('自定义事件名',要传送的数据);
3. 接着使用 bus.vue
紧接着在我们另一个组件(这里指的是接收方)里:
备注:bus.$on('事件名',callback) ---------- callback即指回调$emit要传送的数据;
import { bus } from 'bus.js'
created () { //监听传值 bus.$on('myEvent', (mydata) => {
this.mydata = mydata;
})
}
备注:若只想监听一次事件 ,则使用bus.$once
注销:bus.$off('myEvent', ~~~自己写~~~);
步骤大致就这样~
- 中大型项目:
推荐使用 Vuex ,
解释一波:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;
vuex解决了组件之间同一状态的共享问题 (解决了不同组件之间的数据共享) ,使组件里面的数据持久化。
1. 安装vuex :cnpm install vuex --save (什么是cnpm就不解释了,能学到Vuex的应该都了解cnpm了)
2. 创建一个 vuex 文件夹,并在里面新建一个 store.js 写入以下代码:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
接着往下写:
state 定义数据:state在vuex中用于存储数据
//1.state在vuex中用于存储数据 var state={ //存放数据,数据中心 count:1, // 其他数据格式:orderList: [], // 其他数据格式:params: {} }
getters 类似计算属性:
//2.
var getters= { computedCount: (state) => { return state.count*2 } }
mutations 定义方法:mutations里面放的是方法,方法主要用于改变state里面的数据
//3.mutations里面放的是方法,方法主要用于改变state里面的数据
var mutations={ incCount(){ ++state.count; } }
action 定义方法:异步操作,Action 提交的是 mutation,而不是直接变更状态。
//4.
var actions= { incMutationsCount(context) { /*因此你可以调用 context.commit 提交一个 mutation*/ context.commit('incCount'); /*执行 mutations 里面的incCount方法 改变state里面的数据*/
//此处按照实际情况扩展~ } }
暴露!:暴露上面那四个~
const store = new Vuex.Store({ state, mutations, getters, actions })
export default store;
3. 组件里去使用 Vuex:
(1). 获取state里面的数据
this.$store.state.数据
(2). 获取 getters里面方法返回的的数据 (一般vue 和 store 进行交互 用 $store.getters, getters的值放在计算属性里,动态绑定在计算属性computed里)
this.$store.getters.computedCount
(3). 触发 mutations 改变 state里面的数据 (别记混了)
this.$store.commit('incCount');
(4). 触发 actions里面的方法 (别记混了)
this.$store.dispatch('incMutationsCount'); ps:这个 incMutationsCount 会再去 执行 mutations 里面的incCount方法
大概就这样~
这只是基础步骤,详细的要自己按照自己的详细情况加~
原文地址:https://www.cnblogs.com/XiaoYEBLog/p/11042177.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言中ARMA,ARIMA(Box-Jenkins),SARIMA和ARIMAX模型用于预测时间序列数据
- 以图搜图系统工程实践
- R语言线性判别分析(LDA),二次判别分析(QDA)和正则判别分析(RDA)
- 用R语言实现神经网络预测股票实例
- R语言社区主题检测算法应用案例
- C++ vector学习笔记
- 锂电池充电慢?手把手教你制作锂电池快充充电器
- c++ cin, get学习笔记
- c++ sort 学习笔记
- CSS3 引入方式 注释 颜色属性 学习笔记
- 使用 Makefile 构建指令集
- 安卓 App 逆向课程之四 frida 注入 Okhttp 抓包中篇
- NumPy进阶修炼80题|41-60
- 时序数据库 InfluxDB(一)
- Netty一文深入