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://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates

您的组件仍然可以具有默认模板，但是如果设置，它将覆盖它。

在作为道具传递的vue组件中使用模板

1 个答案: