如何在 vue js 中的不同组件上使用相同的模板？

Question

目前我正在使用 as

<template> ... </template>
<script src="test1.js"> </script>

我所有的业务逻辑都是用 test1.js 编写的。现在我需要使用具有相同模板的 test2.js。我需要用不同的组件重用模板。

我当前的代码是这样的......

common.vue

<template>
 <div>
   {{ page }}
 </div>
<template>

<script src="../scripts/test1.js"></script>

test1.js 的位置

export default {
  name: 'home',
  components: {
    test: test
  },
  data() {
    return {
        page: "test1",
    }
  }
}

但我还需要在我的 test2.js 中使用 common.vue。我无法分别导入这两个 .js。

在 Angular 中，我们可以编写绑定 .html 和 .js（在 ui.router 中）的休闲后期绑定

    .state('home', {
        url:'/',
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })

有类似的吗？

Answer 1

您可以通过id 属性共享模板。

Vue.component('my-comp1', {
  template: '#generic',
  data () {
    return {
      text: 'I am component 1'
    }
  }
})

Vue.component('my-comp2', {
  template: '#generic',
  data () {
    return {
      text: 'I am component 2'
    }
  }
})

new Vue({
  el: '#app'
})

<div id="app">
  <my-comp1></my-comp1>
  <my-comp2></my-comp2>
</div>

<template id="generic">
  <div>
    <p>{{ text }}</p>
  </div>
</template>

<script src="https://unpkg.com/vue"></script>