[Vuejs]-Vuetify child component property

by

1👍

✅

To elaborate on @Prashant – here is an example:

https://codesandbox.io/s/jll61on13

Topbar.vue

<template>
  <v-toolbar v-bind="$attrs">
    <slot/>
  </v-toolbar>
</template>

App.vue

<template>
  <v-app id="inspire">
    <!-- ------------------------------------- -->
    <!-- app-topbar is the custom v-toolbar -->
    <!-- ------------------------------------- -->
    <br>Example 1
    <app-topbar color="primary"></app-topbar>
    <!-- -------------------------------------------- -->
    <br>
    <span>
      Example 2 - using
      <code>slot</code>
    </span>
    <!-- ------------------------------------- -->
    <!-- app-topbar is the custom v-toolbar -->
    <!-- ------------------------------------- -->
    <app-topbar color="primary">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title class="headline text-uppercase">
        <span>v u e</span>
        <span class="font-weight-light">. j s</span>
      </v-toolbar-title>
    </app-topbar>
    <!-- -------------------------------------------- -->
  </v-app>
</template>

<script>
import Topbar from "./components/Topbar.vue";
export default {
  components: {
    appTopbar: Topbar
  },
  data() {
    return {};
  }
};
</script>
👤Matt Oestreich

2👍

You can pass along all the attributes passed to your component to the Vuetify component using v-bind="$attrs"

In your component template

<template>
   <v-toolbar v-bind="$attrs" app fixed></..>
</template>
👤Prashant

Leave a comment