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

Posted 2023-02-23

【中文标题】如何使用 Vue JS 组合多个 Vue JS 实例（与多个 html div 关联）？

【英文标题】：How to combine multiple Vue JS instances (associated with multiple html divs) using Vue JS?

【发布时间】：2018-08-18 08:41:14

【问题描述】：

所以基本上我有两个 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 组件将它们组合起来？我已经阅读了它们，但我是新手，因此我们将不胜感激！

【参考方案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 应用程序，以防你会发现它更容易。