CODEWITHSUNDEEP
vue.jsvuetify.js
user2097439
user2097439

Reputation: 213

vuetify child component property

I want to wrap a vuetify component into another one and select which property is configured from the parent.

I.e.Child component myToolbar

<template>
   <v-toolbar app fixed></..>
</templare>

in parent I would like to configure the fact that the child uses a black, flat attribute like:

<my-toolbar black flat>...</my-toolbar>

How can I know from my child component which attributes where passed by the parent and enable them on the v-toolbar ?

I seem to be stuck with the fact that those are booleans so dark=true does not seem to work.

Any help would be welcome,

Thanks

Pat

Upvotes: 0

Views: 1986

Answers (2)

Matt Oestreich
Matt Oestreich

Reputation: 8528

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>

Upvotes: 1

Prashant
Prashant

Reputation: 8040

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>

Upvotes: 2

Related Questions