vue 頂級(jí)組件

netScorpion 發(fā)布于2019-08-23 12:27 / 938人閱讀

摘要：類似組件庫(kù)的組件或者組件。錯(cuò)了哦，這是一條錯(cuò)誤消息通過(guò)函數(shù)就可以調(diào)用組件方法。在線實(shí)例文檔地址如果是一些全局性的組件，或者頂層組件，就可以考慮在生命周期永久實(shí)例化，綁定在的原型上，方便開(kāi)發(fā)的時(shí)候調(diào)用。

快

有時(shí)候懶的把一些通用組件寫(xiě)到template里面去，而業(yè)務(wù)中又需要用到，比如表示loading狀態(tài)這樣組件。

如果是這樣的組件，可以選擇把組件手動(dòng)初始化，讓組件在整個(gè)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() // 渲染成DOM
  document.body.appendChild(wrap.$el) // 把DOM插入節(jié)點(diǎn)
  const helloInstance = wrapInstance.$children[0] // 拿到的是當(dāng)前的vue實(shí)例，hello實(shí)例是當(dāng)前的子組件
export default helloInstance

// main.js
import helloInstance from "a.js"
Vue.prototype.$someName = helloInstance

實(shí)例化一個(gè)vue組件，掛在到原型鏈或者項(xiàng)目root vue實(shí)例上，就可以通過(guò)函數(shù)式的調(diào)用組件的方法。在APP生命周期內(nèi)可以永不摧毀，方便調(diào)用。

類似Element組件庫(kù)的loading組件或者 message組件。

this.$message.error("錯(cuò)了哦，這是一條錯(cuò)誤消息")通過(guò)函數(shù)就可以調(diào)用Message組件方法。

在線實(shí)例
element文檔地址

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

GPU云服務(wù)器云服務(wù)器 vue組件 vue組件開(kāi)發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98535.html

相關(guān)文章

如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件

摘要：封裝組件系列文章如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件組件背景根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖應(yīng)用場(chǎng)景很多，如后臺(tái)管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營(yíng)銷系統(tǒng)等，現(xiàn)在流行，，三大框架，下面看看怎么使用實(shí)現(xiàn)實(shí)現(xiàn)邏輯產(chǎn)品經(jīng)理的評(píng)審功能需求如下根據(jù)大 Vue封裝組件系列文章如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件組件背景根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖 showImg(https://i.lo...

daydream 2019-08-26 10:11 評(píng)論0 收藏0
EggBorn.js：一款頂級(jí)Javascript全棧開(kāi)發(fā)框架

摘要：是什么是一款頂級(jí)全棧開(kāi)發(fā)框架。漸進(jìn)式開(kāi)發(fā)由于模塊的高度內(nèi)聚，可以將業(yè)務(wù)以模塊的形式沉淀，在多個(gè)項(xiàng)目中重復(fù)使用，既可貢獻(xiàn)到開(kāi)源社區(qū)，也可部署到公司內(nèi)部私有倉(cāng)庫(kù)。模塊發(fā)布當(dāng)項(xiàng)目中的模塊代碼穩(wěn)定后，可以將模塊公開(kāi)發(fā)布，貢獻(xiàn)到開(kāi)源社區(qū)。 EggBorn.js是什么 EggBorn.js是一款頂級(jí)Javascript全棧開(kāi)發(fā)框架。 EggBorn.js是采用Javascript進(jìn)行全棧開(kāi)發(fā)的最佳...

dayday_up 2019-08-21 17:17 評(píng)論0 收藏0
Cabloy.js：基于EggBorn.js開(kāi)發(fā)的一款頂級(jí)Javascript全棧業(yè)務(wù)開(kāi)發(fā)框架

摘要：文檔官網(wǎng)文檔演示是什么是一款頂級(jí)全棧開(kāi)發(fā)框架。不重復(fù)造輪子，而是采用業(yè)界最新的開(kāi)源技術(shù)，進(jìn)行全棧開(kāi)發(fā)的最佳組合。漸進(jìn)式開(kāi)發(fā)由于模塊的高度內(nèi)聚，可以將業(yè)務(wù)以模塊的形式沉淀，在多個(gè)項(xiàng)目中重復(fù)使用，既可貢獻(xiàn)到開(kāi)源社區(qū)，也可部署到公司內(nèi)部私有倉(cāng)庫(kù)。文檔官網(wǎng) && 文檔演示 PC：https://admin.cabloy.com Mobile： showImg(https://seg...

tomlingtm 2019-08-22 18:47 評(píng)論0 收藏0
Vue官方推薦的風(fēng)格指南

摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書(shū)寫(xiě)麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來(lái)增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。文檔沒(méi)有對(duì)JS...

null1145 2019-08-22 18:28 評(píng)論0 收藏0
Vue前端開(kāi)發(fā)規(guī)范

摘要：正例復(fù)制代碼反例復(fù)制代碼組件數(shù)據(jù)組件的必須是一個(gè)函數(shù)。正例更好的做法復(fù)制代碼反例這樣做只有開(kāi)發(fā)原型系統(tǒng)時(shí)可以接受復(fù)制代碼為設(shè)置鍵值總是用配合。這條規(guī)則只和單文件組件有關(guān)。基于Vue官方風(fēng)格指南整理一、強(qiáng)制1. 組件名為多個(gè)單詞組件名應(yīng)該始終是多個(gè)單詞的，根組件 App 除外。正例：exportdefault{name:TodoItem,//...}復(fù)制代碼反例：exportdefault{n...

番茄西紅柿 2021-11-29 10:50 評(píng)論0 收藏2637