Question

我想将一个vuetify组件包装到另一个组件中，并从父级中选择配置哪个属性。

即子组件myToolbar

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

在父级中，我想配置一个事实，即子级使用黑色的扁平属性，例如：

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

如何从子组件中知道父级传递了哪些属性并将其在v工具栏上启用？

我似乎被那些布尔值的事实所困扰，所以dark = true似乎不起作用。

欢迎任何帮助，

谢谢

拍子

Answer 1

您可以使用v-bind="$attrs"

将传递给组件的所有属性传递给Vuetify组件。

在您的组件模板中

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

Answer 2

要详细介绍@Prashant，请参见以下示例：

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>

验证子组件属性

2 个答案: