制作可重用的v卡组件Vue Js

Question

我正在使用v-对话框中的v卡组件.

<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卡组件正以完全相同的参数、值等在许多其他地方使用。我想使它可重用，这样我就可以在一个地方定义它，并调用它。需要帮助

Answer 1

用v卡创建一个组件，并在全局注册它：

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://v2.vuejs.org/v2/guide/components-registration.html