当前位置: 首页 > Web前端 > vue.js

Vue组件之间的价值传递

时间:2023-03-31 19:25:15 vue.js

1.parent传给child1.parent传值1.1父组件自定义一个数据(例如:ftosValue)1.2通过自定义属性将ftosValue传给子组件2.子连接值2.1通过特定属性接收:props2.2直接使用参数{{ftos}}以属性的形式2.child传给parent1.child传值1.1在子组件中定义一个数据(例如:stof)1.2通过自定义事件将stof传给父组件(format:this.$emit('eventname',parameter)this.$emit('to',this.abc)2.父连接值2.1子组件的实现方法:to2.2方法中有一个参数,也就是abc3.兄弟间传值(解决兄弟间传值)1.创建一个公共总线对象(bus.js)2.把兄弟1的参数给bus3.在兄弟2中接收bus的参数4.vuex全局Status数据管理1.下载vuex包并导入into使用2.需要写入新的全局数据3.需要挂载到新的vue这一步硬编码,下载使用脚手架直接选择vuex使用逻辑:全局操作一般情况下,vuex的状态数据必须dispatch(action)-->actionstocommittotriggermutation-->mutationtomodifythestateglobaldata/actions-->mutation-->modifystate.其他情况下,也可以跳过action,直接commitmutation-->modifystateglobaldatausingVuex1.状态2中定义数据。getter相当于vue中的computed计算属性,getter的返回值会根据其依赖关系缓存起来,只有当其依赖值发生变化时才会重新计算。getter可以用来监听状态值的变化,返回计算结果。3.为action注册一个事件处理器,当这个函数被触发时,将状态提交给mutations进行处理。动作中的自定义函数接收上下文参数和要更改的形式参数。4.Mutations是一个对象,其中的方法都是同步的,它是改变状态初始状态的唯一方法。具体用法就是给里面的方法传入参数。state或附加参数dispatch:包含异步操作,比如向后台提交数据,写成:this.$store.dispatch('actionmethodname',value)commit:同步操作,写法:this.$store.commit('mutationsmethodname',value)Vuex如何合理管理数据,分析mutations和action的区别:this问题考察vuex的数据管理和数据结构设计,以及mutation和action的区别答:首先要明确一个特别重要的原则,就是不是所有的数据都要放在vuex里面,因为有vuex中的一句名言:如果你不知道为什么要使用vuex,那么就不要使用它!什么样的数据需要放在vuex中?首先,该数据经常被多个组件使用。如果仅供一个组件使用,则完全没有必要使用。Vuex以vuex为例:一个网站用户的昵称、账号、系统级信息等信息,在业务中随时可能被展示和使用。如果存储在一个组件中,需要获取n次,所以系统级的数据需要放在vuex中,所以系统级的数据相应的放不下。为了让数据看起来更有层次感,可以将上面的结构设计如下,大家可以看到我们应该在什么地方。cargosystem数据是Settingdata如果有一些业务数据需要共享,最好根据模块的具体业务含义进行分类,比如如下:如上代码所示,我们可以很清楚区分每个模块的数据,这样就不会造成数据管理。混淆mutations和action的区别不同于redux只有一个action。Vuex有一个单一的突变。它认为更新数据必须是同步的,即只要调用了提交数据的方法,就可以在mutation中修改数据。如果我们要异步请求怎么办?这里vuex提供了一个专门针对异步请求的模块,action。当然也可以在action中进行同步操作,只是分工更明确。所有的数据操作,无论是同步还是异步,都可以在action过程中完成的mutation只负责接收state,数据快照是同步完成的,所以可以认为state=>负责存储statemutations=>负责同步更新状态actions=>负责获取和处理数据(如果有异步操作,必须在action中处理,然后传递给mutation),提交到mutation去更新状态vuex模块化的模块管理。使用时有注意事项分析:当vuex维护数据越来越复杂时,模块化方案分析:使用单一的状态树,应用的所有状态都会集中在一个在一个比较大的对象上,随着项目需求的不断增加,状态树会越来越臃肿,增加状态树维护的复杂度,代码也变得繁重;所以我们需要模块(模块化)来将我们的状态树分成不同的模块,每个模块都有自己的状态、getters、mutations、actions;并允许每个模块嵌套子模块;如下:在上面的设计中,每个vuex子模块都有你可以定义state/mutations/actions。需要注意的是,我们原来是使用vuex的辅助函数mapMutations/mapActions来引入全局的mutations和action,而我们的vuex子模块是module1,module2...这些模块的actions/mutations也是全局注册的,即如果module1中定义了loginMutation,而module2中也定义了loginMutation,此时mutation就会冲突。如果名字相同,会报错...如果不想冲突,每个模块管理自己的action和mutation,需要给我们的子模块一个属性namespaced:true,那么如何使用组件中子模块的action和mutation步骤基本上是死的熟悉。本题具体考察Vuex虽然是publicstate,但是publicstate也可以分为几个子模块。状态模块,即moduels是当我们的状态树太大太复杂时的一种解决方案,但是笔者认为一旦使用vuex,项目几乎被认为更复杂了