浅析＜router-view＞ v-slot事例

官方关于<router-link> 的 v-slot的相关介绍:
https://router.vuejs.org/zh/api/#router-view-%E7%9A%84-v-slot
并给出了一个例子：

<router-view v-slot="{ Component, route }"><transition :name="route.meta.transition || 'fade'" mode="out-in"><keep-alive><suspense><template #default><component:is="Component":key="route.meta.usePathKey ? route.path : undefined"/></template><template #fallback> Loading... </template></suspense></keep-alive></transition>
</router-view>

但对于初学者在刚开始了解vue或者刚开始入手和摸索学习的时候看到上面的例子应该多少有些懵，上面的{ Component, route }是什么东西，是怎么来的是自己定义的吗？

但你看到前面的v-slot，实际上他就是对应vue的插槽。
参考官方文档：https://v3.cn.vuejs.org/guide/component-slots.html，你不难发现它就是作用域插槽下的解构插槽 Prop,官方给出的例子也类似于v-slot="{ Component, route }"的写法。实际上就是让router-view的插槽能够访问子组件中的数据，访问的数据就是Component和route 。

官方给出Component和route的解释：

Component: 要传递给<component> 的 VNodes 是 prop。
route: 解析出的标准化路由地址。

我们再去参考vue组件基础中的动态组件，你不难发现，其实有相关的介绍：

<component :is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括：

已注册组件的名字，或
一个组件选项对象

<component:is="Component":key="route.meta.usePathKey ? route.path : undefined"
/>

而上面的router-view插槽中的Component就是一个组件选项对象，如果你在浏览器的控制台查看，它类似于下面的结构：

而route就是RouteLocationNormalized，你可以获取RouteLocationNormalized中的参数，比如meta中你自定义的内容。假如，你在meta定义了一个参数cacheable，用来区分是否需要缓存组件，你就可以做如下操作：

<router-view v-slot="{ Component, route }"><keep-alive v-if="Component"><component :is="Component" v-if="route.meta.cacheable"></component></keep-alive><component :is="Component" v-if="!route.meta.cacheable"></component>
</router-view>

而关于keep-alive，大家可以参考，在动态组件上使用-keep-alive。当在某些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复渲染导致的性能问题，我们更希望那些已经打开的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个<keep-alive> 元素将其动态组件包裹起来。

而suspense看官方介绍是一个新增的功能，具体参考：https://v3.cn.vuejs.org/guide/migration/suspense.html
是一个试验性的新特性，用来在正确渲染组件之前进行一些异步操作。目前不推荐在生产使用。

总结:
就单纯看<router-view> v-slot这个事例就简单几行代码，但它需要我们把vue的基础和深入组件掌握好，要不看起来就比较懵，不知道什么意思。

浅析＜router-view＞ v-slot事例相关推荐

Android中onClick(DialogInterface dialog,int which)函数和onClick(View v)函数
今天在学习安卓教程中遇到了一个小问题,问题虽小,却困扰了我很久,查了很多资料才解决.在这里写出来跟大家分享,希望可以对大家有所帮助. 运行工程时,跳出一个对话框"Activity06 has ...
vue进入页面执行的钩子函数_深入理解Vue 的钩子函数
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中 ...
Android中View绘制流程以及invalidate()等相关方法分析
...
Android Loader机制全面详解及源码浅析
原文出处:csdn@工匠若水,http://blog.csdn.net/yanbober/article/details/48861457 一.概述在Android中任何耗时的操作都不能放在UI主线 ...
Android的消息处理机制——Looper,Handler和Message浅析
题外话: 说来有些惭愧,对于这三者的初步认识居然是在背面试题的时候.那个时候自己接触Android的时间还不长,学习的书籍也就是比较适合入门的<疯狂Android讲义>,当然在学到Hand ...
Android在View拉丝工艺和invalidate()和其他相关方法
转载请注明出处:http://blog.csdn.net/qinjuning 前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 . 同 ...
android 动画 alpha,浅析Android 动画之AlphaAnimation应用操作
作为程序员不管是为了什么,或多或少都会模仿其他人的一些手法来达到效果,程序员都必须要做出各种绚丽的动画画面来吸引大家,下面是爱站技术频道小编浅析动画之AlphaAnimation应用操作,一起来了解 ...
Android View - RemoteViews
设计Android的工程师起名字还是挺规范的,而且一眼就知道是什么意思.RemoteViews,顾名思义,远程的View.Android为了能让进程A显示进程B的View,设计了这么一种View(其实 ...
JavaScript设计模式浅析
JavaScript设计模式浅析 JavaScript设计模式浅析一.工厂模式 1.简单的工程模式 2.工程模式实例二.建造者模式 1.建造者模式例子三.单体模式 1.普通创建对象方式 2.单体 ...

浅析＜router-view＞ v-slot事例

浅析＜router-view＞ v-slot事例相关推荐

最新文章

热门文章