一个页面上多个Vue实例

我们在做Vue.js开发时，通常页面上只创建一个vue实例，代码的样式大概是这样的：

<div  id="app">
        {{message}}
</div>

<script>
    var vue=new Vue({
        el: '#app',
        data() {
            return {
                message: "This is my vue"
            }
        }
    });

但在某些情况下，我们需要在页面上有多个vue实例，实践证明，Vue.js是支持多实例共存的，示例代码如下：

<div  id="app1">
        {{message}}
    </div>

    <div id="app2">
        {{message}}
    </div>

<script>
    var vue1=new Vue({
        el: '#app1',
        data() {
            return {
                message: "This is Vue1"
            }
        }
    });

    var vue2 = new Vue({
        el: '#app2',
        data() {
            return {
                message: "This is Vue2"
            }
        }
    });

</script>

尽管这种解决方案可行，但并不推荐在复杂场景下使用。最近的项目中，遇到了一个场景，可以使用这种解决方案。在一个使用Asp.Net MVC的项目中，有一个“个人工作内容页面”，页面中包含很多互相没有关系的模块，比如“待办事务列表”、“会议通知”、“事件提醒”等等，这些模块根据登录用户权限动态进行加载，也就是说不同权限的用户页面上显示的模块是不一样的。在这个项目中，我们把每个模块作为一个MVC的局部视图，在控制器中，根据用户的权限，动态加载对应的局部视图。每个局部视图，都采用vue.js开发相应的客户端功能，每个局部视图中的vue都是一个独立的实例。

作者：寻找无名的特质
链接：https://www.jianshu.com/p/67944c60272e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。