分享
是一种美德

一个页面上多个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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

分享按钮
赞(1)
转载请注明来源地址:MN乐享 » 一个页面上多个Vue实例

评论 1

评论前必须登录!

 

  1. #-49

    赞一个

    mrnaas2个月前 (01-31)