Question

所以基本上我有两个HTML div（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://vuejs.org/v2/guide/components.html。

一旦您知道如何使用组件，您就可以编写类似的内容。

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

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

编辑：此插件https://github.com/drewjbartlett/vue-multivue允许同一页面上同一个班级的多个vue应用，以防您觉得更容易。

如何使用Vue JS组合多个Vue JS实例（与多个html div相关联）？

1 个答案: