快

有時候懶的把一些通用組件寫到

template里面去，而業務中又需要用到，比如表示 loading狀態這樣組件。

如果是這樣的組件，可以選擇把組件手動初始化，讓組件在整個app生命周期中始終保持活躍。

如：

// a.js import Vue from 'vue'import hello from './hello.vue'const wrapInstance = new Vue({render(h) {return h(hello, {})}})const wrap = wrapInstance.$mount() // 渲染成DOMdocument.body.appendChild(wrap.$el) // 把DOM插入節點const helloInstance = wrapInstance.$children[0] // 拿到的是當前的vue實例，hello實例是當前的子組件 export default helloInstance // main.js import helloInstance from 'a.js' Vue.prototype.$someName = helloInstance

實例化一個vue組件，掛在到原型鏈 或者 項目root vue實例上，就可以通過函數式的調用組件的方法。在APP生命周期內可以永不摧毀，方便調用。

類似

Element組件庫的loading組件 或者 message組件。

this.$message.error('錯了哦，這是一條錯誤消息')通過函數就可以調用 Message組件方法。

在線實例
element文檔地址

如果是一些全局性的組件，或者頂層組件，就可以考慮在生命周期永久實例化，綁定在VUE的原型上，方便開發的時候調用。

原文地址：https://segmentfault.com/a/1190000016752860

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue 顶级组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。