成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue中 利用混入定義全局變量、函數(shù)、篩選器

godiscoder / 2489人閱讀

摘要：說一種沒人發(fā)的，利用混入來實(shí)現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點(diǎn)是會有方法變量篩選器提示。一文件進(jìn)行全局混入一文件，我是把方法變量篩選器這三個(gè)分別寫到三個(gè)文件里面了，方便后期維護(hù)。

說一種沒人發(fā)的，利用混入mixins來實(shí)現(xiàn)全局變量和函數(shù)。mixins里面的方法、變量、篩選器會和組件里面的方法、變量、篩選器合并。這種方法優(yōu)點(diǎn)是ide會有方法、變量、篩選器提示。 一、main.js文件 
import Vue from "vue" 
import App from "./App" 
import router from "./router" 
import store from "./store"
import mixin from "./utils/mixin" 
 
Vue.prototype.$bus = new Vue() 

//進(jìn)行全局混入
Vue.mixin(mixin)

new Vue({
    store,
    router,
    render: h => h(App),
}).$mount("#app")
一、mixin.js文件，我是把方法、變量、篩選器這三個(gè)分別寫到三個(gè)js文件里面了，方便后期維護(hù)。也可以直接寫到mixins文件里面 
import filters from "./filters"
import globalMethods from "./global-methods"
import Config from "../config"
import CONSTANT from "./const_var"

// 全局混入
export default {
    data() {
        return {
            CONFIG: Config,
            CONSTANT,
        }
    },
    methods: {
        // //將globalMethods文件里面的方法掛載到vue上,以方便調(diào)用，直接this.$xxx方法名就可以了
        // Object.keys(globalMethods).forEach(key => {
        //     Vue.prototype[key] = tools[key]
        // })
        // 將globalMethods里面的方法用對象展開符混入到mixin上,以方便調(diào)用，直接this.$xxx方法名就可以了
        ...globalMethods,
    },
    filters: {
        // //將filter里面的方法添加了vue的篩選器上
        // Object.keys(filters).forEach(key => {
        //     Vue.filter(key, filters[key])
        // })
        ...filters,
    },
}
filters.js文件 
export default {
    // 時(shí)間轉(zhuǎn)換器
    date(v) {
      ...
    },
    // 處理身份證信息，中間隱藏掉
    processIdNumber(v) {
        ...
    },
}
global-methods.js文件 
import { Message, MessageBox } from "element-ui"

export default {
    $success(msg) {
     ...
    },
    $warning(msg) {
      ...
    },
    $error(msg) {
     ...
    },
    $checkPlatform() {
      ...
    },
    // 倒計(jì)時(shí)時(shí)間格式化
    $countdownFormatTime(timeStamp) {
       ...
    },
}
constant_var.js文件 
export default {
    REDIRECT: "redirect",
    
    // 請求方法
    POST: "post",
    GET: "get",
    PATCH: "patch",
    DELETE: "delete",
    PUT: "put",
    
    // 靜態(tài)常量
    PICKEROPTIONS: {
        ...
    },
    PAGENUMBER: 1,
    PAGESIZE: 10,
    DELAYTIME: 250,
    SUCCESS: "000000",
}

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

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

相關(guān)文章

  • 組件(5)：雜項(xiàng)

    摘要：全局混入對象不會覆蓋組件中的同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用。而鉤子函數(shù)混入和組件中的不合并，而是都執(zhí)行，先執(zhí)行混入中的鉤子，再執(zhí)行組件中的。 組件引用 —— ref、$refs 給子組件或者原始DOM加上ref特性，就可以為其聲明引用標(biāo)記，添加引用后，可以在Javascript中使用vm|this.$refs.refname獲取子組件或原始DOM。若是原始DOM，則效果如...

    GeekQiaQia 評論0 收藏0

  • 組件(5)：雜項(xiàng)

    摘要：全局混入對象不會覆蓋組件中的同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用。而鉤子函數(shù)混入和組件中的不合并，而是都執(zhí)行，先執(zhí)行混入中的鉤子，再執(zhí)行組件中的。 組件引用 —— ref、$refs 給子組件或者原始DOM加上ref特性，就可以為其聲明引用標(biāo)記，添加引用后，可以在Javascript中使用vm|this.$refs.refname獲取子組件或原始DOM。若是原始DOM，則效果如...

    didikee 評論0 收藏0

  • vue混入。

    摘要：定義混入是一種分發(fā)組件中可復(fù)用功能非常靈活的方式?；烊雽ο蟮你^子被調(diào)用組件鉤子被調(diào)用值為對象的選項(xiàng)，例如，和，將被混合為同一個(gè)對象。全局混入也可以全局注冊混入對象。注意使用一旦使用全局混入對象，將會影響到所有之后創(chuàng)建的實(shí)例。 定義 混入是一種分發(fā)Vue組件中可復(fù)用功能非常靈活的方式?；烊雽ο罂梢园我饨M件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。例子： ...

    vslam 評論0 收藏0

  • 讀?VuePress（四）插件機(jī)制的設(shè)計(jì)

    前言 從 9 月份開始，vuepress 源碼進(jìn)行了重新設(shè)計(jì)和拆分。先是開了個(gè) next 分支，后來又合并到 master 分支，為即將發(fā)布的 1.x 版本做準(zhǔn)備。 最主要的變化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式來支撐 vuepress 的運(yùn)作，這一點(diǎn)很像 webpack。 具體架構(gòu)如下： showImg(https://user-gold-cdn.xitu.io/2019...

    April 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<