vue實現自定義公共元件及提取公共的方法

2022-05-27 14:02:17

自定義公共元件及提取公共的方法

vue自定義公共元件

我們在編寫頁面的時候,會存在公共的元件,比如頭部和底部選單

我們拿公共頭部為例子,想在每個頁面都顯示公共頭部的實現方式有兩種：

在src/components目錄建立目錄 common, 再建立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" //引入元件
//第一個參數列示 head-view標籤的內容都用第二個引數headerTop來代替
 Vue.component("head-view",headerTop);
 
//然後在需要使用的vue檔案中引入頭部的話,只需要加入 <head-view></head-view>標籤//

元件區域性引入,需要用的時候才引入使用

 //在需要使用的VUE檔案中引入頭部:
 <template>
 <headerTopNav></headerTopNav>
 </template>

 <script>
import headerTopNav from 'xxx/components/common/header' //引入元件
 export default{
 components: {headerTopNav} //表示headerTopNav標籤的內容被headerTopNav元件代替
 }
 </script>

vue 提取公共的方法

建立資料夾以及 JS檔案用來存放公共的方法

common.js 檔案中內容如下

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就是呼叫時所使用的方法

緊接著定義common.js中的方法，錄入即用

   export default { //公開
    /**
     * 設定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

列印結果是這樣的就說明方法新增成功了，如果想要新增其他的方法也可以通過這樣的形式在原型鏈上新增方法

要使用則是：

this.$common.setCookie('cookieName'，存入字串，天數) //存cookie
this.$common.getCookie('cookieName') //取
this.$common.delCookie('cookieName') //刪除

更新：

若是想將其直接定義為全域性，且在this指向下，可以這樣做：

首先依舊是定義你想要作為公用的方法

/**
 * 設定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)

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue實現自定義公共元件及提取公共的方法

目錄

自定義公共元件及提取公共的方法

vue自定義公共元件

vue 提取公共的方法

vue定義公用方法

熱門文章