vue 頂級組件

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

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

快

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

如果是這樣的組件，可以選擇把組件手動初始化，讓組件在整個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實例，hello實例是當(dāng)前的子組件
export default helloInstance

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

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

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

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

在線實例
element文檔地址

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98535.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

番茄西紅柿 2021-11-29 10:50 評論0 收藏2637