前言
多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用vuex处理,未免有点杀鸡用牛刀.Vue 2.4版本提供了另一种方法,使用v-bind=" $ attrs ",将父组件中不被认为道具特性绑定的属性传入子组件中,通常配合interitAttrs选项一起使用。之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖vuex和事件总线的情况下变得简洁,业务清晰。
<强>首先分析以下应用场景:
一组件与B组件之间的通信:(父子组件)
如上图所示,A, B, C三个组件依次嵌套,按照Vue的开发习惯,父子组件通信可以通过以下方式实现:
-
<李> A到B通过道具的方式向子组件传递,B,通过在B组件中释放美元,一组件中v的方式实现李
<李>通过设置全局Vuex共享状态,通过计算计算属性和提交突变的方式实现数据的获取和更新,以达到父子组件通信的目的。
<李> Vue事件总线,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递。
往往数据在不需要全局的情况而仅仅是父子组件通信时,使用第一种方式即可满足。
一组件与C组件之间的通信:(跨多级的组件嵌套关系)
如上图,一个组件与C组件之间属于跨多级的组件嵌套关系,以往两者之间如需实现通信,往往通过以下方式实现:
-
<李>借助B组件的中转,从上到下道具依次传递,从下至上,美元发出事件的传递,达到跨级组件通信的效果李
<李>借助Vuex的全局状态共享李
<李> Vue事件总线,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递。
很显然,第一种通过道具和美元发出的方式,使得组件之间的业务逻辑臃肿不堪,B组件在其中仅仅充当的是一个中转站的作用,如使用第二种Vuex的方式,某些情况下似乎又有点大材小用的意味,(仅仅是想实现组件之间的一个数据传递,并非数据共享的概念)。第三种情况的使用在实际的项目操作中发现,如不能实现很好的事件监听与发布的管理,往往容易导致数据流的混乱,在多人协作的项目中,不利于项目的维护。
$ attrs以美元及听众的出现解决的就是第一种情况的问题,B组件在其中传递道具以及事件的过程中,不必在写多余的代码,仅仅是将$ attrs以美元及听众向上或者向下传递即可。
示例代码
如下所示:
一组件(App.vue)
结果: 在child1
:
道具:v_child1
$ attrs: {“p-child2”:“v_child2”}
