Question

我目前有这样的事情：

var items = new Vue({
   el: '#items1',

   data: {
      dataUrl: '/api/data?items=items1',
      items: []
   },

   ready: function() {
      this.getItems();
   },

   methods: {
      getItems: function() {
         this.$http.get(this.dataUrl, function(data) {
            this.items = data;
         });
      } 
   }
});

HTML：

<div id="items1">
    <div v-repeat="items">
       <p>{{ name }}</p>
    </div>
</div>

现在，我想将ViewModel重用到另一个HTML部分：

<div id="items2">
    <div v-repeat="items">
       <p>{{ name }}</p>
    </div>
</div>

请注意，{1}和item2的dataUrl不同。

怎么做？

Answer 1

我建议你定义和重用一个像这样的组件：

Vue.component("items", {
   template: "#items",
   props: [ "dataUrl" ],
   data: {
      items: []
   },
   ready: function() {
      this.getItems();
   },
   methods: {
      getItems: function() {
         this.$http.get(this.dataUrl, function(data) {
            this.items = data;
         });
      } 
   }
});

模板：

<script id="items" type="x-template">
    <div v-repeat="items">
       <p>{{ name }}</p>
    </div>
</script>

使用示例：

<items dataUrl="/api/data?items=items1"></items>
<items dataUrl="/api/data?items=items2"></items>

如何在VueJs中重用ViewModel？

1 个答案: