Vue.js 一个VueJS组件具有多个模板

在本文中，我们将介绍如何在Vue.js中创建一个具有多个模板的组件。通常情况下，一个Vue.js组件只对应一个模板，但是有时候我们可能需要在不同的场景下使用不同的模板。通过动态选择模板，我们可以灵活地根据需求渲染不同的视图。

创建一个具有多个模板的组件

首先，我们需要创建一个Vue.js组件，它将具有多个模板。这可以通过在组件定义中使用template选项来实现。以下是一个示例：

Vue.component('multi-template-component', {
  template: `
    <div>
      <h1 v-if="template === 'templateA'">模板A</h1>
      <h2 v-if="template === 'templateB'">模板B</h2>
      <p v-if="template === 'templateC'">模板C</p>
    </div>
  `,
  data() {
    return {
      template: 'templateA'
    };
  }
});

在上面的代码中，我们定义了一个名为multi-template-component的组件，并使用template选项创建了一个拥有三个不同模板的组件。根据template的值不同，组件将渲染不同的内容。初始情况下，组件将渲染”模板A”。

切换模板

在上述示例中，我们通过data选项定义了一个名为template的数据属性，并在模板中通过条件语句来根据template的值选择不同的模板。通过修改template的属性值，我们可以切换模板。

例如，我们可以在一个按钮的点击事件中切换模板：

<button @click="changeTemplate('templateB')">切换到模板B</button>

methods: {
  changeTemplate(template) {
    this.template = template;
  }
}

运行上述代码时，点击按钮将会切换到模板B。

使用计算属性动态选择模板

除了在方法中切换模板，还可以使用Vue.js的计算属性来动态选择模板。这样，我们就可以根据不同的条件自动切换模板。

以下是一个示例：

Vue.component('dynamic-template-component', {
  template: `
    <div>
      <h1>{{ template }}</h1>
      <component :is="selectedTemplate"></component>
    </div>
  `,
  data() {
    return {
      template: '模板A',
      condition: true
    };
  },
  computed: {
    selectedTemplate() {
      return this.condition ? 'templateA' : 'templateB';
    }
  }
});

在上面的代码中，我们定义了一个名为dynamic-template-component的组件，并在模板中使用<component>标签来动态选择模板。selectedTemplate计算属性根据condition的值选择不同的模板。

动态加载模板

除了在组件定义中预先定义多个模板外，还可以在Vue.js中动态加载模板。这可以通过使用<component>标签和v-bind:is属性来实现。以下是一个示例：

Vue.component('dynamic-loading-component', {
  template: `
    <div>
      <button @click="loadTemplate('templateA')">加载模板A</button>
      <button @click="loadTemplate('templateB')">加载模板B</button>
      <component v-bind:is="selectedTemplate"></component>
    </div>
  `,
  data() {
    return {
      selectedTemplate: null
    };
  },
  methods: {
    loadTemplate(template) {
      this.selectedTemplate = template;
    }
  }
});