前沿

最近在項(xiàng)目開發(fā)中遇到一些需要全局引用的公共js,或者公共組件，早就煩死了那種每個(gè)頁面都寫一遍，都引用一個(gè)js的寫法，正好vue解決了這個(gè)額問題，于是乎就開始折騰,折騰的過程中也發(fā)現(xiàn)了一些自己之前未遇到的坑，就紀(jì)錄下來，方便自己學(xué)習(xí)e。

一，先看看全局組件的引用，就拿最常用的全局的暫無數(shù)據(jù)來舉例，看看全局的是如何實(shí)現(xiàn)的。

Step1,首先在components創(chuàng)建一個(gè)公共的目錄，NoDatas目錄里邊包含index.vue和index.js,index.vue用來寫公共的頁面，index.js用來導(dǎo)出這個(gè)組件。

:style="{height: NoDataHeight }">{{NoDataWords}}

export default {

// 就是基本的父子組件傳值

props: ["NoDataHeight", "NoDataWords"],

data() {

return {};

},

methods: {}

};

.NoDataAtAll {

font-size: 14px;

color: #909399;

}

Step2: 然后就是在index.js中注冊(cè)該組件

import NoDataS from './index.vue'

const noDataLists = {

install: function(Vue) {

// 注冊(cè)并獲取組件，然后在main.js中引用，在Vue.use()就可以了

Vue.component('noDataLists', NoDataS)

}

}

export default noDataLists

steps3:在main.js中引入并使用該組件

import noDataLists from '@/components/NoDatas/index'

Vue.use(noDataLists);

至此，就可以完美的使用了。

二，再來聊聊全局公共的js的引用，就拿轉(zhuǎn)換日期格式來舉例，看看全局的是如何實(shí)現(xiàn)的。

Step1,首先在components創(chuàng)建一個(gè)公共的js,然后直接在main.js中引入，需要注意的是######引入后不能直接使用，必須在vue的原型鏈(prototype)里邊注冊(cè)，才可以使用。

// 公共的js

//日期格式轉(zhuǎn)換

export function FromDates(StringDate) {

let T = "",

N = "",

Y = "",

R = "";

for (let i = 0; i < StringDate.length; i++) {

N = StringDate.substring(0, 4) + "-";

Y = StringDate.substring(4, 6) + "-";

R = StringDate.substring(6, 8);

T = N + Y + R;

return T;

}

}

//日期時(shí)間去橫杠

export function FromDatesCancle(StringDate) {

let CanTime = [];

for (let i = 0; i < StringDate.length; i++) {

if (StringDate[i] !== "-") {

CanTime.push(StringDate[i]);

}

}

return CanTime.join('');

}

step2:然后再main.js中引入并注冊(cè)

import {FromDates,FromDatesCancle} from './api/ProcessingDateFormat'

Vue.prototype.$fromdate = FromDates

Vue.prototype.$FromDatesCancle = FromDatesCancle

// 在原型鏈中注冊(cè)，然后再需要引用的頁面就可以這樣拿到--調(diào)用方法：：this.$fromdate()

所以我就更新一下在需要引用的頁面怎么使用，并且前提我已經(jīng)說了是全局的方法，一個(gè)項(xiàng)目中也不會(huì)有那么多全局使用的方法，都是某些模塊使用的，那就寫一個(gè)該模塊使用的公共方法。總有一些人來抬杠，沒得辦法。

在需要使用的頁面引用,詳情請(qǐng)移步vue 接受后臺(tái)傳過來的文件流并下載為excel文件這個(gè)方法就是在需要的頁面引用的。

結(jié)束

到此,這兩種方法都可以使用了,終于不用在每個(gè)頁面引用了,vue的強(qiáng)大,以后還是要多多學(xué)習(xí)的.有不對(duì)的希望小伙伴多多指正.

總結(jié)

以上是生活随笔為你收集整理的vue 公用页面引用_关于vue全局引用公共的js和公共的组件的折腾的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。