我们使用<router-view/>组件进行子页面跳转时候,可以通过为其设置参数来使父组件的参数传递进子组件。如:
<router-view :paramName="paramValue"/>
但是当我们页面层级包括很多层,具体多少层也是动态的时,我们期望子组件、孙子组件、孙子的孙子组件 。。(然后依次很多孙子。。)也能获取到老祖的参数,且后续各种儿子孙子的组件中也可能会保函router-view,并且不设置参数,此时我们可以使用如下方法,仅在祖先定义参数处添加v-bind参数即可,代码如下:
// 祖先代码:
<router-view :paramName1="paramValue2"/>
// 其他儿子、孙子如果也有<router-view>的时候,如下传参:
<router-view v-bind="$attrs"/>
// 这样在儿子、或者各种孙子页面中,如果期望获取老祖中所定义的参数,可以通过如下:
...
this.$attrs['paramName1']来获取到参数
...
当然,在儿子或者各种孙子页面中,也可以定义props来绑定老祖中的参数,如:
props:['paramName1']
这样也可以得到。
延伸扩展
当我们有多个祖先时,每个祖先传递的参数可能不同,儿子或者各种孙子根据不同条件获取不同祖先的参数时可以采用上述的方法。这样不需要在儿子或者各种孙子中的<router-view>绑定具体的参数名,只需要通过$attr将参数延展到后续的儿子或者参数即可。具体参数获取或者业务逻辑由最下层级的儿子或者孙子自行根据业务处理。