vue實(shí)現(xiàn)自定義公共組件及提取公共的方法
更新時(shí)間：2022年05月27日 11:30:31 作者：厚積薄發(fā)的Cicci
這篇文章主要介紹了vue實(shí)現(xiàn)自定義公共組件及提取公共的方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
自定義公共組件及提取公共的方法
vue自定義公共組件
我們在編寫頁面的時(shí)候,會存在公共的組件,比如頭部和底部菜單
我們拿公共頭部為例子,想在每個(gè)頁面都顯示公共頭部的實(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來代替
?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文件 用來存放公共的方法
common.js 文件中內(nèi)容如下
const commonData = () => {
console.log('我是公共的方法')
}
export { commonData }
全局使用：
① 在 main.js 文件中全局引入，并在 vue 的原型鏈 (prototype) 中注冊
// 引入 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 { //公開
/**
* 設(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);
}
}
使用：
在需求頁面打印 this.$common
打印結(jié)果是這樣的就說明方法添加成功了，如果想要添加其他的方法也可以通過這樣的形式在原型鏈上新增方法
要使用則是：
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);
};
然后：
將方法注冊，并添加到Vue的原型鏈
export default {
install(Vue,opeions){
Vue.prototype.getCookie = getCookie;
Vue.prototype.setCookie = setCookie;
Vue.prototype.delCookie = delCookie;
}
};
注：注冊之后需要在main.js引入并use才能生效
import commonApi from './util/common' //你的公用方法文件路徑 Vue.use(commonApi)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue如何構(gòu)建一個(gè)自動建站項(xiàng)目
這篇文章主要介紹了使用vue如何構(gòu)建一個(gè)自動建站項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目
Vite是一個(gè)web開發(fā)構(gòu)建工具,由于其原生?ES?模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2.0 http請求以及l(fā)oading展示實(shí)例
下面小編就為大家分享一篇Vue2.0 http請求以及l(fā)oading展示實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue $attrs的使用全面解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))
這篇文章主要介紹了vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue工程師必會封裝的埋點(diǎn)指令思路知識總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue工程師必會封裝的埋點(diǎn)指令思路知識,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細(xì)介紹了在vue項(xiàng)目中如何使用emoji表情,包括font-awesome圖標(biāo),v-emoji-picker,vue-emoji等emoji表情庫,需要的可以參考下2025-03-03
這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue.delete()刪除對象的屬性說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04