前沿

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

一，先看看全局組件的引用，就拿最常用的全局的暫無數據來舉例，看看全局的是如何實現的。

Step1,首先在components創建一個公共的目錄，NoDatas目錄里邊包含index.vue和index.js,index.vue用來寫公共的頁面，index.js用來導出這個組件。

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

export default {

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

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

data() {

return {};

},

methods: {}

};

.NoDataAtAll {

font-size: 14px;

color: #909399;

}

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

import NoDataS from './index.vue'

const noDataLists = {

install: function(Vue) {

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

Vue.component('noDataLists', NoDataS)

}

}

export default noDataLists

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

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

Vue.use(noDataLists);

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

二，再來聊聊全局公共的js的引用，就拿轉換日期格式來舉例，看看全局的是如何實現的。

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

// 公共的js

//日期格式轉換

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;

}

}

//日期時間去橫杠

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中引入并注冊

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

Vue.prototype.$fromdate = FromDates

Vue.prototype.$FromDatesCancle = FromDatesCancle

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

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

在需要使用的頁面引用,詳情請移步vue 接受后臺傳過來的文件流并下載為excel文件這個方法就是在需要的頁面引用的。

結束

到此,這兩種方法都可以使用了,終于不用在每個頁面引用了,vue的強大,以后還是要多多學習的.有不對的希望小伙伴多多指正.

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。