Vue 封裝乙個自己寫的元件或方法

2021-08-31 10:01:06 字數 919 閱讀 8935

1.首先寫好裡面的模板及傳遞過來的引數

2.定義乙個index.js並引入剛建立的元件並export defaut(vue)=>

3.在main.js裡面引入 然後vue.use(引入的名稱)

vue封裝乙個js引用

vue封裝的js裡面可以是個物件 也可以是方法

export 和 export default的區別是 在乙個頁面中 export可以有很多個

但是export default只能有乙個 常見的使用方法是

在乙個js中export 乙個方法 在main.js中呼叫的時候 需要 import from 『./ws』

這就是在ws.js裡面封裝的wsstart方法被匯出來了 在頁面中用wsstart()就可以呼叫

也可以把所有的方法放在乙個物件中 然後這個物件再賦值給乙個變數 最後匯出、

export default 變數名 然後在main.js裡面 把這個變數名掛載vue的原型鏈上

就可以在任何頁面呼叫

export default 出來的乙個變數如果是物件中的方法 那麼這個變數掛在vue

的原型鏈上在每個頁面都可以呼叫 如 傳送請求的封裝

而 export 出來的 方法 如果掛在原型鏈上面 會列印出整個字串方法

而如果不掛在原型鏈上面而只在main.js裡面引入 在別的頁面使用不了

而如果想在別的頁面使用就得在別的頁面引入 但是可以方便計算 如封裝乙個

計算時間的函式 在哪個頁面需要 就引入一下然後傳參呼叫

而如果想要封裝乙個元件 到別的頁面也可以使用 那就得首先定義好props

在子元件中定義好方法 如果子元件想要修改父元件中的資料 那就封裝乙個

muation 在 store中 也可以封裝幾個然後父元件傳給子元件需要呼叫的muation

裡面的方法名稱呼叫 也可以通過$emit來修改

自己寫的乙個Vue

下面這裡是我自己寫的乙個小型的vue,原理就是proxy proxy天生沒有prototype,因此要加上,不然extends會報錯 proxy.prototype proxy.prototype object.prototype class myvue extends proxy super da...

Vue封裝乙個自己的元件 Alert資訊提示框

在專案中經常遇到提示資訊元件,我們 一般會用ui庫來做。但是當ui庫無法滿足自己的需求 比如自定樣式,ui庫的樣式很難改變 下面就是簡單封裝乙個自己的alert資訊提示框。1.我們要做得是alert元件所以要預設幾個字段 title 標題 message 提示資訊 duration 顯示時間 2.給...

vue如何封裝乙個元件

1.新增子元件 在工程src components目錄下新建乙個資料夾用於存放元件。我封裝了乙個樹元件,資料夾名稱為va tree,裡面有乙個va tree.vue檔案,寫了樹元件的具體內容,包括元件樣式 元件處理邏輯 元件模板等等 子元件中定義的props是父元件需要傳給子元件的資料,在子元件中p...