如何在 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>

请注意，item1 和 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>

如何在 VueJs 中重用 ViewModel？

How to reuse a ViewModel in VueJs?

javascript

vue.js