vuejs设置模板＆＃s; src的动态路径

Question

我有一个vue应用程序，我已经按照下面的方式划分了组件。

我想要的是在src中绑定<template>属性，如下所示，每次用户要求加载不同的模板时，我都可以拥有一个动态路径。

.ts文件将为每个不同的模板使用相同的代码。这促使我问这个问题。 请建议一个解决方案。或者我是否朝着正确的方向努力实现这一目标？

Answer 1

实现动态模板渲染的一种方法是使用动态组件渲染：

App.vue：

<template>
  <div>
    <button @click="selectedComponent = 'app-quote'">Quote</button>
    <button @click="selectedComponent = 'app-author'">Author</button>
    <button @click="selectedComponent = 'app-new'">New</button>
    <hr>
    <component :is="selectedComponent"></component>
  </div>
</template>

<srcript>
  import Quote from './components/Quote.vue'
  import Author from './components/Author.vue'
  import New from './components/New.vue'

  data: function() {
    return {
      selectedComponent: 'app-quote'
    }
  },
  components: {
    'app-quote': Quote,
    'app-author': Author,
    'app-new': New
  }
</script>