Vue extend使用示例深入分析
Vue.extend()雖然已近用過很多次了,但都沒有深入思考過這個東西,仔細想了想,有點意思
一、使用場景
按需使用組件,也叫懶加載,性能蹭蹭往上走
擴展的組件,其自由度高到你無法想象
二、補充組件注冊
平日里,我們使用組件:
黃金玩家:
<template> <A/> </template> import A from "./A.vue"; export default { components: { A }, }
鉑金玩家
import Vue from "vue" import A from "./A" Vue.component("A", A)
鉆石玩家
import Vue from "vue"; // 檢索目錄下的模塊 const req = require.context(".", true, /\.vue$/); req.keys().forEach(fileName => { // require模塊 const componentConfig = req(fileName); const name = fileName.name || fileName.replace(/^\.\/(.*\/)?/, "").replace(/\.vue$/, ""); Vue.component(name, componentConfig.default || componentConfig); });
王者玩家
不必多說,今日主角!閃亮登場!
// 創(chuàng)建一個構(gòu)造器 const Constructor = Vue.extend(test); // 利用構(gòu)造函數(shù)創(chuàng)建實例 //創(chuàng)建過程中可 向組件中傳入數(shù)據(jù) const instance = new Constructor({ propsData:{ age:'23' } }); // instance.age = 29 // 掛載到某個dom上 instance.$mount(this.$refs.container)
三、深度解析
聊聊天
為什么我會對其贊不絕口,我收了錢嗎?也有可能。
回歸正題,開始聊這個之前先提一下vue的工作機制,尤其是cli的打包運作。在項目完成后,執(zhí)行命令打包,只會將項目里用到的 .vue、.js、.css、.json、.svg等等文件進行打包,所以如果你是從老項目遷移開發(fā),原本幾百兆的文件夾,打包后可能只有十幾二十兆,當(dāng)然這需要你的懶加載做的比較好。
上面說的還是有點抽象,說點我們能感知到的。假設(shè)你寫了下面這么一個組件test.vue,但是你腦子轉(zhuǎn)太快了,以至于手速都跟不上,所以,你犯錯了,age沒定義你就使用了,那勢必會報錯對吧?其實并不會,你不導(dǎo)入,不使用它,一點事情沒有,它只會在那錯下去孤獨終老。
<template> <div class="container"> 我是擴展,掛接外面的div的組件啦 <div>{{ age }}</div> </div> </template> <script> export default { data() { return {}; } };
但是你只要一導(dǎo)入,使用,立馬報錯:
再次回到剛剛那個點:你不引入它,就不會報錯。那按需引入,使用到才引入,有沒有一種辦法,我使用的時候再傳age給test組件呢?豈不是美哉?Vue.extend()就可以完美做到!
再淺談一下Vue.extend()是個啥
他也不是什么特別高大上的東西,官方說是個繼承構(gòu)造器,講人話就是構(gòu)造函數(shù)。通過構(gòu)造函數(shù)可以實例化對象,這個構(gòu)造函數(shù)很特殊,他是Vue構(gòu)造函數(shù)的子構(gòu)造函數(shù),繼承與Vue的Constructor(),所以理所當(dāng)然的,他的參數(shù)就與Vue的參數(shù)一樣:
上個例子瞧瞧
子組件聲明props接收
<template> <div class="container">我是擴展,掛接外外面的div的組件啦 <div>{{age}}</div> </div> </template> <script> export default { props: { age: { type: String, default: "" } } };
父組件用extend控制實例化這個對象并掛載到對應(yīng)DOM上,可以使用propData進行傳值
<template> <div ref="container" class="container"> </div> </template> <script> import Vue from "vue"; import test from "./components/Vue.extend/test"; export default { mounted() { // 創(chuàng)建一個構(gòu)造器 const Constructor = Vue.extend(test); // 利用構(gòu)造函數(shù)創(chuàng)建實例 //創(chuàng)建過程中可 向組件中傳入數(shù)據(jù) const instance = new Constructor({ propsData:{ age:'23' } }); // 掛載到某個dom上 instance.$mount(this.$refs.container) }, methods: {} }; </script>
亮點是什么呢?這里的test組件的prop可以直接去掉:
<template> <div class="container">我是擴展,掛接外外面的div的組件啦 <div>{{age}}</div> </div> </template>
父組件中以實例屬性形式網(wǎng)上掛接數(shù)據(jù),自由度真的太高了?。。∵@樣運用起來,可以封裝出意想不到的組件庫。現(xiàn)在主流UI庫的很多巧妙邏輯都是使用了,Vue.extend(),只不過是搭配上函數(shù)對懶加載進行控制
<template> <div ref="container" class="container"> </div> </template> <script> import Vue from "vue"; import test from "./components/Vue.extend/test"; export default { mounted() { // 創(chuàng)建一個構(gòu)造器 const Constructor = Vue.extend(test); // 利用構(gòu)造函數(shù)創(chuàng)建實例 //創(chuàng)建過程中可 向組件中傳入數(shù)據(jù) const instance = new Constructor(); //可以直接以屬性方式掛接到實例上 instance.age = 29 // 掛載到某個dom上 instance.$mount(this.$refs.container) }, }; </script>
到此這篇關(guān)于Vue extend使用示例深入分析的文章就介紹到這了,更多相關(guān)Vue extend內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue extends 屬性的用法示例詳解
- 關(guān)于Vue-extend和VueComponent問題小結(jié)
- Vue.extend實現(xiàn)組件庫message組件示例詳解
- vue使用Vue.extend方法仿寫個loading加載中效果實例
- 如何巧用Vue.extend繼承組件實現(xiàn)el-table雙擊可編輯(不使用v-if、v-else)
- vue中使用mixins/extends傳入?yún)?shù)的方式
- vue?extend+promise封裝全局彈窗組件
- Vue.extend 登錄注冊模態(tài)框的實現(xiàn)
- Vue extend學(xué)習(xí)示例講解
相關(guān)文章
如何通過Vue自帶服務(wù)器實現(xiàn)Ajax請求跨域(vue-cli)
從A頁面訪問到B頁面,并且要獲取到B頁面上的數(shù)據(jù),而兩個頁面所在的端口、協(xié)議和域名中哪怕有一個不對等,那么這種行為就叫跨域,這篇文章給大家介紹如何通過Vue自帶服務(wù)器實現(xiàn)Ajax請求跨域(vue-cli),感興趣的朋友一起看看吧2023-10-10