Question

目前我正在使用

<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。

在角度中，我们可以编写一个迟到的bindig，它绑定.html和.js（在ui.router中）

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

有类似的东西吗？

Answer 1

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

＆＃13;

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'
})

＆＃13;

<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>

＆＃13;

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

1 个答案: