草庐IT

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

zhaoll98k 2023-07-11 原文

官方关于<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的解释：

我们再去参考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的基础和深入组件掌握好，要不看起来就比较懵，不知道什么意思。

事例浅析spanclasstokenvue.js前端javascript

有关浅析＜router-view＞ v-slot事例的更多相关文章

  1. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  4. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  5. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前，Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段，但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联，它们似乎是正确的，这可能与嵌套在公司下的项目有关，还是我遗漏了其他东西？提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关，但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

  6. ruby-on-rails - 在 haml View 中重构条件 - 2

    除了可访问性标准不鼓励使用这一事实指向当前页面的链接，我应该怎么做重构以下View代码？#navigation%ul.tabbed-ifcurrent_page?(new_profile_path)%li{:class=>"current_page_item"}=link_tot("new_profile"),new_profile_path-else%li=link_tot("new_profile"),new_profile_path-ifcurrent_page?(profiles_path)%li{:class=>"current_page_item"}=link_tot("p

  7. ruby - Sinatra 找不到 View 目录 - 2

    我正在尝试以一种更类似于普通RubyGem结构的方式构建我的Sinatra应用程序。我有以下文件树:.├──app.rb├──config.ru├──Gemfile├──Gemfile.lock├──helpers│  ├──dbconfig.rb│  ├──functions.rb│  └──init.rb├──hidden│  └──Rakefile├──lib│  ├──admin.rb│  ├──api.rb│  ├──indexer.rb│  ├──init.rb│  └──magnet.rb├──models│  ├──init.rb│  ├──invite.rb│  ├─

  8. ruby-on-rails - 如何让 Rails View 返回其关联的操作名称？ - 2

    我有一个非常简单的Controller来管理我的Rails应用程序中的静态页面:classPagesController我怎样才能让View模板返回它自己的名字，这样我就可以做这样的事情:#pricing.html.erb#-->"Pricing"感谢您的帮助。 最佳答案 4.3RoutingParametersTheparamshashwillalwayscontainthe:controllerand:actionkeys,butyoushouldusethemethodscontroller_nameandaction_nam

  9. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  10. ruby-on-rails - 如何编写跨模型、 Controller 和 View 的 Rails mixin - 2

    为了减少我的小Rails应用程序中的代码重复，我一直致力于将我的模型之间的通用代码放入它自己的单独模块中，到目前为止一切顺利。模型的东西相当简单，我只需要在开头包含模块，例如:classIso这工作正常，但是现在，我将有一些Controller和View代码，这些代码也将在这些模型之间通用，到目前为止，我有这个用于我的可发送内容:#Thisisamodulethatisusedforpages/formsthatarecanbe"sent"#eitherviafax,email,orprinted.moduleSendablemoduleModeldefself.included(kl

随机推荐