摘要:前言你知道,用法嗎你知道他們的區(qū)別嗎你知道他們的執(zhí)行順序嘛下面都能找到這些答案使用構(gòu)造器創(chuàng)建一個子類參數(shù)是包含組件選項的對象是全局的創(chuàng)建構(gòu)造器實例傳入的數(shù)據(jù)為對應(yīng)的標簽最外層必須只有一個標簽這是擴展的數(shù)據(jù)創(chuàng)建實例,并掛載到一個元素上。
前言
你知道extend,mixins,extends,components,install用法嗎?1.Vue.extend
你知道他們的區(qū)別嗎?
你知道他們的執(zhí)行順序嘛?
下面都能找到這些答案.
1.使用vue構(gòu)造器,創(chuàng)建一個子類,參數(shù)是包含組件選項的對象;
2.是全局的
// 創(chuàng)建構(gòu)造器 var Profile = Vue.extend({ template: "{{extendData}}實例傳入的數(shù)據(jù)為:{{propsExtend}}
",//template對應(yīng)的標簽最外層必須只有一個標簽 data: function () { return { extendData: "這是extend擴展的數(shù)據(jù)", } }, props:["propsExtend"] }) // 創(chuàng)建 Profile 實例,并掛載到一個元素上。可以通過propsData傳參. new Profile({propsData:{propsExtend:"我是實例傳入的數(shù)據(jù)"}}).$mount("#app-extend")
結(jié)論:
Vue.extend實際是創(chuàng)建一個構(gòu)造器,對應(yīng)的初始化構(gòu)造器,并將其掛載到標簽上
github源碼,請戳這里 ,歡迎star
2.Vue.component1.將通過 Vue.extend 生成的擴展實例構(gòu)造器注冊(命名)為一個全局組件,參數(shù)可以是Vue.extend()擴展的實例,也可以是一個對象(會自動調(diào)用extend方法)
2.兩個參數(shù),一個組件名,一個extend構(gòu)造器或者對象
//1.創(chuàng)建組件構(gòu)造器 var obj = { props: [], template: "3.mixins",//最外層只能有一個大盒子,這個和{{extendData}}
對應(yīng)規(guī)則一致 data: function () { return { extendData: "這是Vue.component傳入Vue.extend注冊的組件", } }, }; var Profile = Vue.extend(obj); //2.注冊組件方法一:傳入Vue.extend擴展過得構(gòu)造器 Vue.component("component-one", Profile) //2.注冊組件方法二:直接傳入 Vue.component("component-two", obj) //3.掛載 new Vue({ el: "#app" }); //獲取注冊的組件 (始終返回構(gòu)造器) var oneComponent=Vue.component("component-one"); console.log(oneComponent===Profile)//true,返回的Profile構(gòu)造器
值可以是一個混合對象數(shù)組,混合實例可以包含選項,將在extend將相同的選項合并
mixins代碼:
var mixin={ data:{mixinData:"我是mixin的data"}, created:function(){ console.log("這是mixin的created"); }, methods:{ getSum:function(){ console.log("這是mixin的getSum里面的方法"); } } } var mixinTwo={ data:{mixinData:"我是mixinTwo的data"}, created:function(){ console.log("這是mixinTwo的created"); }, methods:{ getSum:function(){ console.log("這是mixinTwo的getSum里面的方法"); } } } var vm=new Vue({ el:"#app", data:{mixinData:"我是vue實例的data"}, created:function(){ console.log("這是vue實例的created"); }, methods:{ getSum:function(){ console.log("這是vue實例里面getSum的方法"); } }, mixins:[mixin,mixinTwo] }) //打印結(jié)果為: 這是mixin的created 這是mixinTwo的created 這是vue實例的created 這是vue實例里面getSum的方法
結(jié)論:
1.mixins執(zhí)行的順序為mixins>mixinTwo>created(vue實例的生命周期鉤子);
2.選項中數(shù)據(jù)屬性如data,methods,后面執(zhí)行的回覆蓋前面的,而生命周期鉤子都會執(zhí)行
extends用法和mixins很相似,只不過接收的參數(shù)是簡單的選項對象或構(gòu)造函數(shù),所以extends只能單次擴展一個組件
var extend={ data:{extendData:"我是extend的data"}, created:function(){ console.log("這是extend的created"); }, methods:{ getSum:function(){ console.log("這是extend的getSum里面的方法"); } } } var mixin={ data:{mixinData:"我是mixin的data"}, created:function(){ console.log("這是mixin的created"); }, methods:{ getSum:function(){ console.log("這是mixin的getSum里面的方法"); } } } var vm=new Vue({ el:"#app", data:{mixinData:"我是vue實例的data"}, created:function(){ console.log("這是vue實例的created"); }, methods:{ getSum:function(){ console.log("這是vue實例里面getSum的方法"); } }, mixins:[mixin], extends:extend }) //打印結(jié)果 這是extend的created 這是mixin的created 這是vue實例的created 這是vue實例的getSum里面的方法
結(jié)論:
1.extends執(zhí)行順序為:extends>mixins>mixinTwo>created
2.定義的屬性覆蓋規(guī)則和mixins一致
注冊一個局部組件
//1.創(chuàng)建組件構(gòu)造器 var obj = { props: [], template: "5.install",//最外層只能有一個大盒子,這個和{{extendData}}
對應(yīng)規(guī)則一致 data: function () { return { extendData: "這是component局部注冊的組件", } }, }; var Profile = Vue.extend(obj); //3.掛載 new Vue({ el: "#app", components:{ "component-one":Profile, "component-two":obj } });
1.是開發(fā)vue的插件,這個方法的第一個參數(shù)是 Vue 構(gòu)造器,第二個參數(shù)是一個可選的選項對象(可選)
2.vue.use方法可以調(diào)用install方法,會自動阻止多次注冊相同插件
var MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 2. 添加全局資源,第二個參數(shù)傳一個值默認是update對應(yīng)的值 Vue.directive("click", { bind(el, binding, vnode, oldVnode) { //做綁定的準備工作,添加時間監(jiān)聽 console.log("指令my-directive的bind執(zhí)行啦"); }, inserted: function(el){ //獲取綁定的元素 console.log("指令my-directive的inserted執(zhí)行啦"); }, update: function(){ //根據(jù)獲得的新值執(zhí)行對應(yīng)的更新 //對于初始值也會調(diào)用一次 console.log("指令my-directive的update執(zhí)行啦"); }, componentUpdated: function(){ console.log("指令my-directive的componentUpdated執(zhí)行啦"); }, unbind: function(){ //做清理操作 //比如移除bind時綁定的事件監(jiān)聽器 console.log("指令my-directive的unbind執(zhí)行啦"); } }) // 3. 注入組件 Vue.mixin({ created: function () { console.log("注入組件的created被調(diào)用啦"); console.log("options的值為",options) } }) // 4. 添加實例方法 Vue.prototype.$myMethod = function (methodOptions) { console.log("實例方法myMethod被調(diào)用啦"); } } //調(diào)用MyPlugin Vue.use(MyPlugin,{someOption: true }) //3.掛載 new Vue({ el: "#app" });6.各個方法之間的關(guān)系
Vue.extend和Vue.component是為了創(chuàng)建構(gòu)造器和組件;
mixins和extends是為了拓展組件;
install是開發(fā)插件; 總的順序關(guān)系: Vue.extend>Vue.component>extends>mixins
github源碼,請戳這里,歡迎star
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/52627.html
摘要:前言你知道,用法嗎你知道他們的區(qū)別嗎你知道他們的執(zhí)行順序嘛下面都能找到這些答案使用構(gòu)造器創(chuàng)建一個子類參數(shù)是包含組件選項的對象是全局的創(chuàng)建構(gòu)造器實例傳入的數(shù)據(jù)為對應(yīng)的標簽最外層必須只有一個標簽這是擴展的數(shù)據(jù)創(chuàng)建實例,并掛載到一個元素上。 前言 你知道extend,mixins,extends,components,install用法嗎? 你知道他們的區(qū)別嗎?你知道他們的執(zhí)行順序嘛? 下面...
摘要:兩個對象鍵名沖突時,取組件對象的鍵值對。允許聲明擴展另一個組件可以是一個簡單的選項對象或構(gòu)造函數(shù),而無需使用。這主要是為了便于擴展單文件組件。 Vue作為最近最炙手可熱的前端框架,其簡單的入門方式和功能強大的API是其優(yōu)點。而同時因為其API的多樣性和豐富性,所以他的很多開發(fā)方式就和一切基于組件的React不同,如果沒有對Vue的API(有一些甚至文檔都沒提到)有一個全面的了解,那么在...
摘要:父組件在前,子組件在后。,,首先會在子組件里查找,如果沒有,才會沿著原型鏈向上,找父組件中對應(yīng)的屬性。 在segmentfault上看到了一個問題vue.extend, vue.component 區(qū)別,突然有些方,好歹也寫了幾個小vue項目,自己都弄不清楚這些東西... new Vue()、component 首先我們來約定一個選項對象 baseOptions,后面的代碼會用到. ...
摘要:代碼如下核心這里會再次合并一下上的全局的一些指令或則組件或則過濾器到組件的構(gòu)造函數(shù)上最后在內(nèi)部組件初始化時。會調(diào)用這里還是把構(gòu)造函數(shù)的放在了上供后續(xù)使用總的來說。將原型指向根構(gòu)造函數(shù)的自然而然就會有的原型上的所有屬性和方法。。 插件:聰明的程序員往往希望能更高(tou)效(lan)的完成指定的工作,插件就是按照一定的封裝方式,暴露接口。讓我們利用這些接口更快捷的實現(xiàn)功能。升職加薪。每個...
摘要:想要使用語法的話,配合,這個插件,體驗更佳,這個插件在語法中實現(xiàn)了。這種方式最接近的單文件組件的寫法,如果一個完善項目從改成,用這種方法很快,只要加上和一些必要的變量類型就好了,然后用包裹就好。不推薦混入用這種方式寫,無法實現(xiàn)多繼承。 最近嘗試了一下 TypeScript,試著把一個 Vue 項目改成了 TypeScript 的,感覺還不錯 目前 Vue 和 TypeScript 的配...
閱讀 876·2021-10-25 09:45
閱讀 3305·2021-09-22 14:58
閱讀 3861·2021-08-31 09:43
閱讀 924·2019-08-30 15:55
閱讀 924·2019-08-29 13:51
閱讀 1237·2019-08-29 13:02
閱讀 3493·2019-08-29 12:52
閱讀 1968·2019-08-26 13:27