根据条件动态设置Vuetify组件道具

如何解决根据条件动态设置Vuetify组件道具

我有一个导航栏组件，该组件是使用Web应用程序上的v-app-bar vuetify组件制成的。我遇到的问题是我需要根据用户所在的页面动态设置v-app-bar的道具。

 <v-app-bar
  absolute
  color="#43a047"
  dark
  shrink-on-scroll
  prominent
  src="https://picsum.photos/1920/1080?random"
  fade-img-on-scroll
  scroll-target="#scrolling-techniques-5"
  scroll-threshold="500"
>

例如，下面的代码是带有道具的基本v-app-bar组件，以使应用程序栏具有随着用户向下滚动而褪色和减小大小的图像背景，这基本上就是我使用的网站的登录页面。因此，我只希望首页上的此横幅导航栏样式，而当用户位于另一页面上时想要不同的样式。我尝试制作单独的导航栏组件，以及在组件内部使用v-if来基于路由更改导航栏，结果导致代码重复（多个if语句基于导航栏组件中的路由），并且效率不高。对于我正在建立的网站（具有不同类型用户帐户的交互式大型网站），如果我可以从使用v-app-bar的页面中动态设置v-app-bar Vuetify道具，将会非常容易而不是使用每个页面的这些更改来制作单独的导航栏组件。

解决方法

我会假设您在布局中使用v-app-bar，因此，正如您所说，使用this.$route访问路由将需要很多ifs或一个大的switch语句，而且性能不那么好。

由于nuxt中的每条路线都是由页面文件定义的，因此您可以使用它将详细信息传递到布局，然后将其用作v-app-bar中的props。为此，您可以使用事件总线。我之前有一个答案，详细说明了它的使用here，但我可以在此处概述如何应用它。

您似乎想要传递颜色，src，滚动目标等道具来定制导航栏。在您的页面上，您可以像这样传递这些道具：

//index.vue -- or any route 

export default {
  mounted() {
      let props = {
        color: '#43a047',src: 'https://picsum.photos/1920/1080?random',scroll-target: '#scrolling-techniques-5',scroll-threshold: 500
      }
      this.$nuxt.$emit('appBarProps',props);
  }
}

然后在您的布局中监听事件总线，如下所示：

//default.vue

created() {
    this.$nuxt.$on('appBarProps',p => {
      this.appBarProps = p;
      })
    },data() {
    return {
      appBarProps: {}
    } 
}

beforeDestroy() {
    this.$nuxt.$off('appBarProps');
},

并在v-app-bar中使用appBarProps对象