制作可重用的 v-card 组件 Vue Js

Question

我在 v-dialog box 中使用 v-card 组件。

<v-dialog
        v-model="dialog3"
        transition="dialog-bottom-transition"
        max-width="600"
      >
        <v-card>
          <v-card-title class="text-h5 text-center indigo darken-1 lighten-2">
            Print Record
          </v-card-title>
          <v-card-text>
            <v-checkbox
              v-model="includeAnnotations"
              label="Include Annotations"
              @change="deselectDisabled()"
            ></v-checkbox>

            <v-radio-group class="mt-0 ml-12" v-model="annotationOption">
              <v-radio
                :value="embedIntoImage"
                label="Embedded Into Image"
                :disabled="includeAnnotations === false"
              ></v-radio>
              <v-radio
                :value="burnIntoImage"
                label="Burn Into Image"
                :disabled="includeAnnotations === false"
              ></v-radio>

              <v-checkbox
                class="mt-0 ml-8"
                v-model="maintainColor"
                label="Maintain Annotation Color "
                :disabled="
                  annotationOption === 0 || includeAnnotations === false
                "
              ></v-checkbox>
            </v-radio-group>

            <v-checkbox
              class="mt-0"
              v-model="burnReduction"
              label="Burn Reduction"
            ></v-checkbox>
          </v-card-text>

          <v-divider></v-divider>
          <!--                -->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="onDownloadFile()">
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

v-card 组件正在许多其他地方使用，具有完全相同的参数、值等。我想让它可重用，这样我就可以在一个地方定义它并调用它。需要帮助

Answer 1

使用您的 v-card 创建一个组件并全局注册它：

Vue.component('mycard', require('./components/my-card-component.vue').default);

然后你就可以在任何地方使用它了：

<v-dialog
    v-model="dialog3"
    transition="dialog-bottom-transition"
    max-width="600"
>
    <mycard></mycard>
</v-dialog>

查看官方文档：https://vuejs.org/v2/guide/components-registration.html

制作可重用的 v-card 组件 Vue Js

Make reusable v-card component Vue Js

vue.js

vuetify.js