前言
今天继续加油学习，今天整理一下 VUE 中组件通信六种方式，依次介绍一下各个通信方式。嘻嘻嘻，让我们一起学起来好吧~~~come
方法一 props/$emit
父传子：props
子传父：父组件向子组件传递事件方法，子组件通过 $emit 触发事件，回调给父组件
第一种方法是我们经常用到的方法 我就不写代码来进行展示了，这个比较简单。
方法二：eimt/on
说明：上面两种方式处理的是父子组件之间的数据 传递，如果两种组件不是父子关系呢？这种情况下面可以使用中央事件总线的方法。/新建一个 Vue 事件 bus 对象，然后通过 bus.emit触发事件，bus.on 监听触发的事件这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。
具体实现方式：
var bus =new Vue(); Vue.component('brother2',{ data(){ return{ msg:"hello brother1" } }, template:` <div> <p>我是老大 </p> <input type='text' v-model:'msg' @input='passData(msg)'/> </div> `, methods:{ passData(val){ // 触发全局事件globalEvent this.$emit('globalEvent',val) } } }); Vue.component('brother1',{ data(){ return{ msg:"hello brother1", brother2Msg:'' } }, template:` <div> <p>我是老二</p> <p> 老大传递过来的数据：{{brother2Msg}}</p> </div> `, mounted(){ //绑定全局事件globalEvent事件 bus.$on('globalEvent事件',(val)=>{ this.brother2Msg=val; }) } });
复制代码
var Event=new Vue(); Event.$emit(事件名,数据); Event.$on(事件名,data => {});// 假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据// 组件A、B通过Event.$emit(事件名,数据)将数据传递，组件C通过 Event.$on(事件名,data => {})接受组件A、B传递的数据
复制代码
方法三：Vuex
vuex 就是一个仓库，仓库里放了很多对象。在 state 中存放数据源，当组件要更改 state 中的数据时，必须通过 mutation 进行，mutation 储存的是改变 state 中数据的操作方法，之后通过 actions 储存的操作去触发 mutation 中的方法,由组件中的 $store.dispatch(‘action 名称’, data1)来触发。然后由 commit()来触发 mutation 的调用 , 间接更新 state。
方法四：# Vuex + localstorage
vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面，刷新之后，如果 localStorage 里有保存的数据，取出来再替换 store 里的 state。
这里需要注意的是：由于 vuex 里，我们保存的状态，都是数组，而 localStorage 只支持字符串，所以需要用 JSON 转换。
方法五： attrs和listeners
第一种方式处理父子组件之间的数据传输有一个问题：如果父组件 A 下面有个子组件 B，组件 B 下面有组件 C，这时如果组件 A 想传递数给组件 C 怎么办呢?如果采用第一种方法，我们必须让组件 A 通过 prop 传递信息给组件 B,组件 B 在通过 prop 传递信息给组件 C；要是组件 A 和组件 C 之间有更多的组件那采用这种方式就很复杂了。vue2.4 开始提供了 attrs和listeners 来解决这个问题能够让组件 A 之间传递信息给组件 C
Vue.component('C',{ data(){ return{ } }, template:` <div> <div @click='cClickHandler'>{{$attrs.messagec}}</div> </div> ` , methods:{ cClickHandler(){ alert(1); this.$emit('getCData','我是C的数据') } } }); Vue.component('B',{ data(){ return{ } }, template:` <div> <C v-bind="$attrs" v-on="$listeners"> </C> </div> ` , methods:{ } }); Vue.component('A',{ data(){ return{ } }, props:['message'], template:` <div> <B v-bind="$attrs" v-on="$listeners"> </B> </div> ` , methods:{ } }); var App ={ data(){ return{ msg:'我是父组件的内容', messagec:'hello c' } }, methods:{ }, template:`<div> <p> 这是一个父组件</p> <A :messagec='messagec' v-on:getCData='getCData'> </A> </div> `, methods:{ getCData(val){ console.log(val); } } }
复制代码
方法六：provide/inject
父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。不论子组件有多深,只要调用了 inject 那么就可以注入 provider 中的数据。而不是局限于只能从当前父组件的 prop 属性来获取数据,只要在父组件的生命周期内，子组件都可以调用。
Vue.component('Child',{ data(){ return{ msg:'' } }, template:` <div> 我是孩子{{msg}} </div> ` , inject:['for'], created(){ this.msg=this.for; } }); Vue.component('Parent',{ template:` <div> <p> 我是父亲</p> </Child> </div> ` , }); Var App ={ data(){ return{ } }, provide:{ for:'他爹' }, template:` <div> <h2>我是入口组件</h2> <Parent/> </div> ` } ;
复制代码
评论