vue實(shí)現(xiàn)自定義公共組件及提取公共的方法
自定義公共組件及提取公共的方法
vue自定義公共組件
我們?cè)诰帉?xiě)頁(yè)面的時(shí)候,會(huì)存在公共的組件,比如頭部和底部菜單
我們拿公共頭部為例子,想在每個(gè)頁(yè)面都顯示公共頭部的實(shí)現(xiàn)方式有兩種：
在src/components目錄創(chuàng)建目錄 common, 再創(chuàng)建header.vue
header.vue
<template> ? <div> ? <h1>header in here</h1> ? </div> </template>
?<script>
? export default{}
?</script>1.全局掛載組件
在main.js里掛載
import headerTop from "xxx/components/common/header" //引入組件
//第一個(gè)參數(shù)表示 head-view標(biāo)簽的內(nèi)容都用第二個(gè)參數(shù)headerTop來(lái)代替
?Vue.component("head-view",headerTop);
?
//然后在需要使用的vue文件中引入頭部的話,只需要加入 <head-view></head-view>標(biāo)簽//組件局部引入,需要用的時(shí)候才引入使用
?//在需要使用的VUE文件中引入頭部: ?<template> ?<headerTopNav></headerTopNav> ?</template>
?<script>
import headerTopNav from 'xxx/components/common/header' //引入組件
?export default{
?components: {headerTopNav} //表示headerTopNav標(biāo)簽的內(nèi)容被headerTopNav組件代替
?}
?</script>vue 提取公共的方法
創(chuàng)建文件夾 以及 JS文件 用來(lái)存放公共的方法
common.js 文件中內(nèi)容如下
const commonData = () => {
console.log('我是公共的方法')
}
export { commonData }
全局使用：
① 在 main.js 文件中全局引入，并在 vue 的原型鏈 (prototype) 中注冊(cè)
// 引入 common.js
import { commonData } from './utils/common.js'
// 將 common 配置給 Vue 的 $common 成員
Vue.prototype.$commonData = commonData
然后在需要用到該方法的組件文件中使用，如下
<template> ? <div></div> </template>
<script>
export default {
? created() {
? ? this.$commonData();
? }
};
</script>
<style lang="less" scoped>
</style>② 在需要用到該方法的組件文件中局部引用
import { commonData } from '../utils/common.js'
<script>
export default {
created() {
commonData();
}
};
</script>
vue定義公用方法
在src目錄下新建common公用方法文件夾用于存放公用方法列表
common下新建common.js
該示例定義存、取、刪cookie方法
main.js中引入該文件，并將其添加到Vue原型鏈上
import common from './common/common' Vue.prototype.$common = common //其中$common就是調(diào)用時(shí)所使用的方法
緊接著定義common.js中的方法，錄入即用
export default { //公開(kāi)
/**
* 設(shè)置cookie
**/
setCookie(name, value, day) {
let date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires=' + date;
},
/**
* 獲取cookie
**/
getCookie(name){
let reg = RegExp(name + '=([^;]+)');
let arr = document.cookie.match(reg);
if (arr) {
return arr[1];
} else {
return '';
}
},
/**
* 刪除cookie
**/
delCookie(name) {
setCookie(name, null, -1);
}
}
使用：
在需求頁(yè)面打印 this.$common
打印結(jié)果是這樣的就說(shuō)明方法添加成功了，如果想要添加其他的方法也可以通過(guò)這樣的形式在原型鏈上新增方法
要使用則是：
this.$common.setCookie('cookieName'，存入字符串，天數(shù)) //存cookie
this.$common.getCookie('cookieName') //取
this.$common.delCookie('cookieName') //刪除
更新：
若是想將其直接定義為全局，且在this指向下，可以這樣做：
首先依舊是定義你想要作為公用的方法
/**
* 設(shè)置cookie
**/
function setCookie(name, value, day) {
let date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires=' + date;
};
/**
* 獲取cookie
**/
function getCookie(name) {
let reg = RegExp(name + '=([^;]+)');
let arr = document.cookie.match(reg);
if (arr) {
return arr[1];
} else {
return '';
}
};
/**
* 刪除cookie
**/
function delCookie(name) {
setCookie(name, null, -1);
};
然后：
將方法注冊(cè)，并添加到Vue的原型鏈
export default {
install(Vue,opeions){
Vue.prototype.getCookie = getCookie;
Vue.prototype.setCookie = setCookie;
Vue.prototype.delCookie = delCookie;
}
};
注：注冊(cè)之后需要在main.js引入并use才能生效
import commonApi from './util/common' //你的公用方法文件路徑 Vue.use(commonApi)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機(jī)制，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue?iview?導(dǎo)航高亮動(dòng)態(tài)設(shè)置方式
這篇文章主要介紹了vue?iview?導(dǎo)航高亮動(dòng)態(tài)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3?使用Element?Plus表格單選帶checkbox功能
這篇文章主要介紹了Vue3?使用Element?Plus表格單選帶checkbox,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-11-11
vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題
這篇文章主要介紹了vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue?this.$refs.xxx報(bào)錯(cuò)undefined問(wèn)題及解決
這篇文章主要介紹了vue?this.$refs.xxx報(bào)錯(cuò)undefined問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽(tīng)store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計(jì)算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過(guò)代碼講解非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細(xì)介紹了vue+Echart實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04