再學習vue知識點

2021-10-07 14:08:09 字數 979 閱讀 6945

vue傳值方法

1.props/$emit   這個就是父子元件傳值  很常見 不多說

2.$emit/$on   註冊eventbus  ;

通過乙個空的vue例項作為**事件匯流排(事件中心),用它來觸發事件和監聽事件,巧妙而輕量地實現了任何元件間的通訊,包括父子、兄弟、跨級。  也很常見  簡單描述下

var event=new vue();

event.$emit(事件名,資料);

event.$on(事件名,data => {});

3.vuex  這個也不多說    基本都得會  

4.$attrs/$listeners  

$attrs 子元件 接收的父級引數集合 ;

$listeners  子元件 接收的父級事件集合 ;

自己接收上一級註冊的引數,事件  如果是多級元件,跨級這種,就得層層註冊,第**才可以拿到第一級的引數或者方法;雖然麻煩,好處在於可以知道是那一層級發生的改變;

5.provide/inject  

跟4其實很像,但是provide/inject   可以避免層層註冊,父級註冊等同於data層級的provide,可以在其中寫入引數,事件,子級inject,接收乙個陣列,把需要接收的方法已['****','****'],接收,就可以子級呼叫

比如某些情況下我們需要在子元件某個週期執行後在觸發 ,當然可以父元件掛載事件,子元件$emit觸發,不過有了@hook之後就可以直接運用了

// parent.vue

dosomething() {

console.log('父元件監聽到 mounted 鉤子函式 ...');

// child.vue

mounted(){

console.log('子元件觸發 mounted 鉤子函式 ...');

// 以上輸出順序為:

// 子元件觸發 mounted 鉤子函式 ...

// 父元件監聽到 mounted 鉤子函式 ...

Vue常用知識點

使用cdn 通過npm安裝 npm install vue 獲取當前繫結的元素獲取當前繫結的資料 vm.data 更換data物件重新整理檢視,盡量不去更換 監控模型的變化 vm.watch message function newval,oldval 生命週期 3.3 屬性的計算1.vue中的閃爍...

Vue小知識點

動態路由 巢狀路由 routes 程式設計式導航 字串 router.push home 物件 router.push 命名的路由 router.push 帶查詢引數,變成 register?plan private router.push const userid 123 router.push ...

Vue 知識點總結

1.mvvm?對比mvc mvvm model view viewmodel model 資料模型,可以定義資料修改和操作的業務邏輯 view ui元件,將資料元件轉換成ui展示 viewmodel 同步view和model的物件 view和model沒有直接的聯絡,通過viewmodel進行互動,...