Ссылка на один и тот же шаблон в двух разных местах для рендеринга внутри компонента Vue

Question

У меня есть этот компонент:

<template>

  <div>    

    <!-- If usecard is true, I want to render a wrapper -->
    <v-card flat v-if="usecard">
      <v-container>

        <!-- I want to reference the errors template here -->

      </v-container>
    </v-card>

    <!-- If usecard is false, I want to render only the errors template -->
    <div v-if="!usecard">

      <!-- I want to reference the errors template here -->

    </div>

    <!-- Template for error stuff -->
    <template id="errors">
      <v-layout row wrap v-if="errors.length">
        <v-flex xs12>
          <v-alert :value="true" type="error">
            <ul>
              <li v-for="(error, i) in errors" :key="i + error">{{ error }}</li>
            </ul>
          </v-alert>
        </v-flex>
      </v-layout>
    </template>

  </div>

</template>

<script>
export default {
  name: "NuErrorList",
  props: {
    errors: {
      type: Array,
      required: false,
      default: () => [],
    },
    usecard: {
      type: Boolean,
      required: false,
      default: () => false,
    },
  },
  data() {
    return {};
  },
};
</script>

По сути, я хочу визуализировать оболочку вокруг определенного фрагмента HTML без необходимости повторять его. Я подумал о том, чтобы определить template, а затем сослаться на него в двух разных местах, которые поочередно отображаются в зависимости от значения свойства usecard. Но я не знаю, как сослаться на этот шаблон из этих двух разных мест.

Есть идеи?

Answer 1

Создайте компонент, который вы хотите показать на нескольких страницах. Затем компонент отображает его в App.vue и внутри элемента компонента добавляет

        <router-view></router-view>

Таким образом вы используете одну базу кода и показываете ее на других страницах Приложение. vue

   <v-app>
    <div id="app">
      <v-app>
       <myTemplateComponentVisibleToAllpages>
         <router-view></router-view>
       </myTemplateComponentVisibleToAllpages>
      </div>
     </v-app>