11 个高级 Vue 编码技巧

v-for="(route, idx) in $router.options.routes.filter(

(routeItem) => routeItem.name === $route.matched[0].name

)"

使用此 v-for，您可以直接在模板中访问路由器树的所有子路由和单个路由元数据。我最近在一个项目中使用它来生成动态侧边栏导航组件。我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。我还能够自动生成所有侧边栏链接，而无需对每个链接进行编码。以下是我设置路由器路由的方法：客户端还有一个额外的要求，他们不仅需要从路由器生成这些侧边栏路由，还需要从他们的 API 数据生成这些侧边栏路由。上述方法也以一种干净且可管理的方式解决了这个任务。我能够控制如何直接从路由器显示本地路由以及是否使用 API 提供的路由。我还用它来制作自动面包屑以显示用户的路线历史。在此下方（此处未显示）我还有一个单独的部分，允许侧边栏切换到使用从 API 发送的一组路由。为了触发它，我简单地使用了一个a v-if，如果它们存在就使用它们，否则它将恢复使用来自 vue-router 的路由。在我的 SideNavbar 组件模板中：你可能已经注意到了exact-active-class代码：有了这个，如果路由器链接的目的地与当前路由匹配，Vue 会自动设置一个活动类。这是一个很好的技巧，可以绕过我们用来实现这一点的典型逻辑，并将其缩短为exact-active-class=”className”。我经常将它用于导航栏链接——它既减少了模板大小，又使事情变得更干净。

3、从子组件访问父数据

有时，我们想从父级访问数据，但又不想经历传递 props 的麻烦。如果你只需要从a 的数据对象中快速获取一个值，你可以简单地通过引用parent的数据对象中快速获取一个值，你可以简单地通过引用parent 来完成：

// In parent

data() {

return {

message: ‘This is my message’

}

}

// In child template

{ { $parent.message }}

// <-- results in 'This is my message'

如果你想要在组件之间传递数据的更多好方法，Erik Hanchett 有一个很棒的视频，地址：https://www.youtube.com/watch?v=rKWSj3zfBAs&t=46s，你可以去了解一下，还有一些其他选项。

4、简化你的 :class 和 v-if 与逻辑.includes()

凭借 v-directives 的所有功能，很容易忘记我们仍然可以在我们的模板中访问纯 JavaScript 的高级功能。例如，