Vue2 x 專案踩坑筆記

給檔案設定路徑別名，方便在元件內引入檔案，不必寫太長的路徑名稱。

全域性引入scss檔案，不必在單個元件內再次引入，可以直接使用。例如：全域性變數、px2rem函式等檔案

const path = require('path');
function resolve(dir) 
module.exports = ,}},
chainwebpack: config => 
}

為了解決專案進入時候白屏bug

const router = new vuerouter(
]});

html 屬性名稱對大小寫不敏感，因此瀏覽器會將所有大寫字元解釋為小寫字元。也就是說。當你在你 dom 模板中書寫 prop 時，你應當將駝峰式(camelcase)轉寫為等價的（連字元分割的）串聯式(kebab-case)：

vue.component('blog-post', )

還可以通過 v-bind 給 props 分配動態值，就像這樣：

再次申明，如果是在使用字串模板的場景，則沒有這些限制。

// 進入路由
beforerouteenter(to, from, next) );
},

在生命週期mounted中進行監聽滾動：

mounted () ,

在方法中定義監聽滾動執行的方法：

scrolltotop() ,

記得在離開當前路由解綁scroll事件

beforeroutele**e(to, form, next)

如果非同步請求的資料出現報錯，可以通過v-if判斷一下，注意不能使用v-show，v-show的機制是載入後，根據條件判斷是否顯示，當然渲染元件的時候也可以這樣做

引數或查詢的改變並不會觸發進入/離開的導航守衛，但是可以通過觀察 $route 物件來應對這些變化，或使用 beforerouteupdate 的元件內守衛。

有時候父元件觸發的實際需要修改子元件內的data資料，這時候請給子元件繫結ref屬性，在父元件觸發時間內修改子元件的變數

0" />
// 收起選單
this.$refs.head.show = false;

第一種：直接在子元件中通過this.$parent.event來呼叫父元件的方法

這種方式可以無限級別的向上找父級，例如：this.$parent.$parent.$parent.$parent.event,子元件也不需要props屬性接收父元件的方法，但是多層級的時候容易搞亂層級，.$parent太多了

父元件

子元件

點選

第二種：父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法

父元件內呼叫子元件的時候需要顯示的傳入方法（注意：這裡是用的:傳入方法），子元件還需要通過props接收父元件傳來的方法，否則也不可以呼叫，另外就是多層級的時候需要一層一層的往下傳，這時候就比較繁瑣

父元件

子元件

點選

第三種：子元件裡用$emit向父元件觸發乙個事件名（注意：這裡是用的@傳入方法），父元件監聽這個事件名就行了,子元件不需要通過props接收父元件傳來的方法，否則也不可以呼叫，這種最好向上傳遞一層父級，否則也需要層層傳遞

父元件

子元件

點選

第四種：使用$emit和$on配合傳遞事件

如果僅僅是父子一層，傳遞事件就使用第三種就可以了，如果多層傳遞或者是兄弟元件，還可以使用$emit和$on配合，其原理就是new 乙個vue例項，然後在父子元件引入這個例項，這樣在子元件觸發的事件就會在父元件監聽到了，這就是網上說的eventbus。

新建乙個bus.js

import vue from 'vue';
export default new vue();

在父子元件分別引入這個bus.js

import eventbus from 'bus';

在子元件觸發事件

export default }};

在父元件監聽事件

export default 
};

當然如果你覺得建乙個bus.js檔案多餘的話，可以在main.js裡把bus加到原型上

//vue原型鏈掛載匯流排
vue.prototype.eventbus = new vue();

加到原型上的好處就是全域性都可以使用了

this.eventbus.$emit('fathermethod');
this.eventbus.$on('fathermethod');

全域性引入元件

import vue from 'vue';
import from 'vant';
vue.use(toast);

引入 toast 元件後，會自動在 vue 的 prototype 上掛載 $toast 方法，便於在元件內呼叫。

export default ,
};

當然也可以在元件內引入

import  from 'vant';

元件內使用

export default ,
};

只要緊記繫結和解綁的事件是同乙個就行了,如果不是乙個，就單寫成乙個函式

export default ,
methods: ,300),
// 繫結滾動載入資料事件
addscrolldata(),300);
// 繫結滾動載入資料事件
window.addeventlistener('scroll', this.getscrolldata);}},
//離開路由和元件銷毀選擇適合專案寫一種解綁即可
// 離開路由之前
beforeroutele**e(to, from, next),
//元件銷毀之前
beforedestroy () ,
};

在http.js使用store

import store from '@/store';
import from "@/store/mutationtypes.js";
......
...store.commit(show_loading);

在元件內使用

this.$store.commit(show_loading);

Vue2 x 專案踩坑筆記

vue2 x學習筆記（一）

vue3建立vue2 x專案

Vue2 x 快速入門例項專案

Vue2 x 專案踩坑筆記

vue2 x學習筆記（一）

vue3建立vue2 x專案

Vue2 x 快速入門例項專案

相關推薦