vuetify 子组件属性答案

【问题标题】：vuetify child component propertyvuetify 子组件属性
【发布时间】：2019-03-20 16:33:36
【问题描述】：

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

即子组件myToolbar

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

在父级中，我想配置子级使用黑色扁平属性，例如：

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

我如何从我的子组件中知道父组件传递了哪些属性并在 v-toolbar 上启用它们？

我似乎坚持认为这些是布尔值，所以 dark=true 似乎不起作用。

欢迎任何帮助，

谢谢

拍拍

【问题讨论】：

是编写的简便方法，因此如果可以的话，您可以控制此变量中的道具了解您的问题
您希望哪个子组件继承这些属性？
Matheus，我尝试将并将数据部分中的 isBlack 定义为 true/false/undefined，但它不会考虑该值。它不会给出错误，但 black 属性永远不会像那样应用

标签： vue.js vuetify.js

【解决方案1】：

您可以使用 v-bind="$attrs" 将传递给组件的所有属性传递给 Vuetify 组件

在你的组件模板中

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

【讨论】：

【解决方案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>

【讨论】：