Vue多應用頁面是指一個頁面可以同時渲染多個Vue應用,即每個應用可以獨立運行、獨立維護,但又在一個頁面中相互協作。Vue多應用頁面的實現方式為使用Vue-Router。
// main.js import Vue from 'vue' import App1 from './App1.vue' import App2 from './App2.vue' import router from './router' const apps = [ { name: 'App1', app: new Vue({ render: h =>h(App1), router }), el: '#app1' }, { name: 'App2', app: new Vue({ render: h =>h(App2), router }), el: '#app2' } ] apps.forEach(({app, el}) =>{ app.$mount(el) })
如上代碼中,我們在頁面加載時就實例化了兩個Vue應用,并渲染在不同的DOM元素上,其Router實例是共用的,即兩個應用的路由實現方式是相同的。在路由匹配時,Vue-Router會根據當前的URL渲染相應的組件。
每個Vue應用的數據是相互獨立的,它們各自通過自己的state、props、data來管理自己的組件。然而,多個應用之間如果需要交互,可以使用Vue實例的事件機制來實現。
// App1.vue { data() { return { name: 'App1' } }, methods: { changeName() { this.$emit('change-name', 'App2') } } } // App2.vue { data() { return { name: 'App2' } }, mounted() { this.$on('change-name', name =>{ this.name = name }) } }
如上代碼中,App1通過$emit方法觸發一個事件change-name,并將參數傳遞給所有監聽該事件的Vue實例。在App2中,通過$on方法來監聽該事件,并在事件被觸發時改變它自己的數據。通過這種方式,兩個應用之間就可以實現簡單的交互。
相比傳統的單一Vue應用,Vue多應用頁面的優點在于它可以更好地實現模塊化,每個應用可以單獨維護、開發,易于擴展與管理。同時,多個應用之間可以通過事件進行交互,進一步增強了頁面應用的靈活性。
下一篇vue 外賣點菜