如何使用 Vue JS 组合多个 Vue JS 实例(与多个 html div 相关联)

Question

所以基本上我有两个HTMLdiv(vueapp1和vueapp2(做同样的事情(它们只是吐出信息，每个都与自己的Vue实例相关联，允许读取JSON以吐出信息(。

即 HTML：

<div id="vueapp1">
    <div class="testleft panel-pane-ticket pane-views-panes rounded" v-
    for="result in results.slice(0,3)">
        <div class="odd">
            <div class="ticketcustomer" >{{ result.Customer}}</div>
        </div>
        <....more html.../>
</div> <!--End vueapp1>

使用 VueJS 代码在 JSON 中读取为：

    const vuemaster1 = new Vue({
    el: '#vueapp1',
    data: {
        results: []
    },
    mounted() {
        var self = this
        axios.get('https://api.myjson.com/bins/hfpwh')
        .then(function (response) {
            console.log(response);
            self.results= response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
    }
});

截至目前，这两段代码在一个html文件中重复了两次。有没有办法使用 Vue 组件将它们组合起来？我已经阅读了它们，但我是新手，所以任何帮助将不胜感激！

Answer 1

你应该看看 vue.js 文档指南：https://v2.vuejs.org/v2/guide/components.html。

一旦你知道如何使用组件，你就可以写一些类似的东西。

<div id="app">
  <my-component/>
  <my-component/>
</div>

考虑 my-component 组件中的当前应用程序代码。

编辑：此插件 https://github.com/drewjbartlett/vue-multivue 允许在同一页面上使用同一类的多个 vue 应用程序，以防您发现它更容易。