在作為道具傳遞的 vue 組件中使用模板

Question

我是一個新手，所以如果我仍然掌握編碼基礎知識，請多多包涵。

我想使用在道具中定義的模板。 模板位於 DOM 內部。 我想這樣做的原因是我想重用組件邏輯（特別是分頁），但可能想改變模板在不同頁面中顯示數據的方式。 所以我想將模板從腳本文件中分離出來。

這是 HTML 文件：

<div id="store-list">
  <paginated-list :list-data="stores" use-template="#displayList"></paginated-list>
</div>

<script type="text/template" id="display-list">
  <div>
    <div v-for="p in paginatedData">
      {{p.BusinessName}} 
    </div>
  </div>
</script>

這是 .js 文件：

Vue.component('paginated-list', {
  data() {
    return {
      pageNumber: 0
    }
  },
  props: {
    listData: {
      type: Array,
      required: true
    },
    useTemplate: {
      type: String,
      required: false
    },
    size: {
      type: Number,
      required: false,
      default: 10
    }
  },
  computed: {
    pageCount() {
      let l = this.listData.length,
        s = this.size;
      return Math.floor(l / s);
    },
    paginatedData() {
      const start = this.pageNumber * this.size,
        end = start + this.size;
      return this.listData
        .slice(start, end);
    }
  },
  //template: document.querySelector('#display-list').innerHTML // this works
  template: document.querySelector(useTemplate).innerHTML // this does not
});

var sl = new Vue({
  el: '#store-list',
  data: {
    stores: [{
      "BusinessName": "Shop Number 1"
    }, {
      "BusinessName": "Shop Number 2"
    }, {
      "BusinessName": "Shop Number 3"
    }]
  }
});
var shoppingList = new Vue({
  el: '#shopping-list',
  data: {
    header: 'shopping list app',
    newItem: '',
    items: [
      '1',
      '2',
      '3',
    ]
  }
})

任何幫助是極大的贊賞。 謝謝你。

Answer 1

您可以使用inline-template屬性在渲染時覆蓋組件的模板。 例如

<paginated-list :list-data="stores" inline-template>
  <div>
    <div v-for="p in paginatedData">
      {{p.BusinessName}} 
    </div>
  </div>
</paginated-list>

見https://v2.vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates

您的組件仍然可以有一個默認模板，但如果設置了它將覆蓋它。