javascript - 如何在 VueJs 中重用 ViewModel？

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>

请注意，items1 和 items2 的 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>