一、父传子
1.父传值
1.1父组件自定义一个数据（例如：ftosValue)
1.2通过自定义属性的方式将ftosValue传给子组件
2.子接值
2.1通过特定属性：props来进行接收
2.2直接以属性的方式来使用参数{{ ftos }}
二、子传父
1.子传值
1.1子组件中定义一个数据（例如：stof）
1.2通过自定义事件的方式将stof传给父组件（格式：this.$emit('事件名',参数）
this.$emit('to',this.abc)
2.父接值
2.1给子组件实现方法：to
2.2方法中有一个参数，这个参数就是abc
三、兄弟传值（解决兄弟之间的传值）
1.创建一个公共的bus对象(bus.js)
2.将兄弟1的参数给bus
3.兄弟2中接收bus的参数
四、Vuex全局状态数据管理
1.下载vuex包并导入use一下
2.需要new一下 写上全局数据
3.需要挂载到new vue上
这个步骤是写死的，下载使用脚手架直接就可以选vuex
使用逻辑：操作全局vuex的state数据
正常情况下必须dispatch(action)-->actions去commit触发mutation-->mutation里面才能修改state全局数据 / actions-->mutation-->修改state
其他情况也可以跳过action去直接commit mutation-->修改state全局数据
使用Vuex
1.在state中定义数据
2.Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters 可以用于监听、state中的值的变化，返回计算后的结果
3.给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参
4.mutations是一个对象里面的方法都是同步，是更改state初始状态的唯一的方法，具体的用法就是给里面的方法传入参数state或额外的参数
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
Vuex怎么合理规范管理数据，及mutations和actions区别
解析：此题考查vuex中数据的管理和数据结构的设计，还有mutations和actions的区别
解答：首先要明确一个特别重要的原则，就是不是所有的数据都要放在vuex中，因为vuex有一句名言:假如你并不知道为什么要使用vuex,那就不用使用它!
那什么样式的数据需要放在vuex中呢?首先这个数据要被多个组件频繁用到,如果只是被一个组件用到,那完全没有必要为了使用vuex而使用vuex
举例:一个网站用户的昵称,账号,资料,像这种系统级别的信息,随时可能在业务中展示和使用,如果在组件中储存,那么要获取n次,所以系统级别的数据是需要放置在vuex中的,那么系统级别数据也不能所以的放置,为了让数据看着更有层级结构,可以按照像下面这样设计
上面这种结构,一看便知道我们应该哪里货物系统数据即设置数据
如果有些业务数据,也需要共享,最好按照模块的具体业务含义分类,比如下面:
如上图代码所示,我们很清晰的能够分清楚每个模块的数据,这样不会导致数据管理的混乱
mutations和actions的区别
不同于redux只有一个action,vuex单独拎出了一个mutations,它认为更新数据必须是同步的,也就是只要调用了提交数据方法,在mutation里面才可以修改数据
那么如果我们想做异步请求,怎么做?这里vuex提供了专门做异步请求的模块,action,当然action中也可以做同步操作,只不过分工更加明确,所有的数据操作,不论是同步还是异步,都可以在action中完成
mutation只负责接收状态,同步完成数据快照
所以可以认为
state => 负责存储状态
mutations => 负责同步更新状态
actions => 负责获取 处理数据(如果有异步操作必须在action处理 再到mutation),提交到mutation进行状态更新
vuex模块化module管理,使用的时候有注意事项
分析:当vuex维护数据越来越复杂的时候,模块化解决方案
解析:使用单一的状态树,应用的所有状态都会集中在一个比较大的对象上面,随着项目需求的不断增加,状态树也会变得越来越臃肿,增加了状态树维护的复杂度,而且代码变得沉长;因此我们需要modules(模块化)来为我们的状态树分离成不同的模块,每个模块拥有自己的state,getters,mutations,actions;而且允许每个module里面嵌套子module;如下:
上面的设计中,每个vuex子模块都可以定义state/mutations/actions
需要注意的是,我们原来使用vuex辅助函数
mapMutations/mapActions引入的是全局的mutations和actions,并且我们vuex子模块也就是module1,module2...这些模块的action/mutation也注册了全局
也就是如果module1中定义了loginMutation,module2中也定义了loginMutation,此时,mutation就冲突了
如果重名,就报错了...
如果不想冲突,各个模块管理自己的action和mutation,需要给我们的子模块一个属性namespaced:true
那么组件中怎么使用子模块的action和mutations
步骤基本是死的 熟悉就好了
此题具体考察Vuex虽然是一个公共状态,但是公共状态还可以切成若干个子状态模块,也就是moduels
解决当我们的状态树过于庞大和复杂时的一种方案,但是笔者认为,一旦用了vuex,几乎就认定该项目是较为复杂的