Javascript 如何在VueJs中重用ViewModel？

我现在有这样的东西：

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

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

HTML:

{{name}}

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

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

{{name}}

请注意，items1和items2的

dataUrl

是不同的

---

如何做到这一点？

我建议您定义并重用如下组件：

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

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>

{{name}}

用法示例：

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

因此，您希望在两个div中使用

项

vm，但两者的URL是否都不同？这就是我所理解的吗？是的，但是

项目的内容将不同，因为它将从不同的URL检索（这由
getItems（）
处理）。您必须为每个唯一的HTML
id
创建一个唯一的视图模型。或者您创建一个包含
元素的Vue.js组件，该组件包含从父元素中提取id并调用HTTP请求的代码。这就是我想要避免的（为每个
id
创建一个唯一的VM），如果Vue可能并支持的话，在我的站点的一个页面中，有3个部分具有与此相同的行为。在这种情况下，您能否共享Vue组件的代码？我仍在学习Vue…谢谢。id=items1的模板中是否有输入错误？是的，已修复。谢谢谢谢你的回答。它完全回答了我上面的问题，但我的情况有点不同，如果我有一个稍微不同的模板，比如在
items2
块中，我需要显示另一个字段，比如“address”。解决方案是相似的还是我们需要不同的方法？（也许我应该为此创建另一个问题）。您可以使用新模板创建一个新组件，也可以向模板添加条件逻辑（如v-if），该模板仅在适当的情况下显示“地址”。