vue知識點 二) 元件通訊

2021-09-18 03:12:44 字數 1459 閱讀 4033

想起這些實在有些繁瑣,於是剛開始開發就走了捷徑,選擇了vuex進行頁面間傳值:

1. 搭建vue腳手架,安裝vuex依賴

2. 專案目錄src下新建store目錄和store.js檔案

通常store物件都包含4個屬性:state,getters,actions,mutations。

state (類似儲存全域性變數的資料)

getters (提供用來獲取state資料的方法)

actions (提供跟後台介面打交道的方法,並呼叫mutations提供的方法)

mutations (提供儲存設定state資料的方法)

3.在mian.js中匯入store.

import store from './store'

vue.prototype.$store = store

store,

})

4.元件使用:

a.把vuex引入。

import  from 'vuex'

//寫入對應方法

mapstate(['forcedlogin', 'token', 'id', 'mcid', 'cid']),

...mapmutations(['login', 'settoken', 'setid', 'setmcid', 'setcid']),

b.使用資料

console.log(this.id); //呼叫vuex 中id

this.login(); //呼叫vuex 中 login 方法

後來想想,其實有些資料沒有必要讓所有元件都有修改的許可權,同時,變數重名之類的問題層出不窮,熟悉其他方法很有必要。

a.父傳子

在子元件中 prop:["msg"] 或者 prop 用於接受父元件傳過來的值。

在父元件中使用子元件< child msg="hello" > 或者動態繫結< child :msg="hello" >

b.子傳父

在子元件中設定觸發函式,觸發函式包含  this.$emit("tochild","hello")

在父元件的或者

tochild:function(data)

在子元件

inject:["data"]

在隔許多層的父子元件中都能使用。

除了以上提到的vuex還有eventbus方法可實現任意元件傳值

使用前在全域性定義乙個eventbus

window.eventbus = new vue();

在某頁面:

eventbus.$emit("toothers",id);

在另乙個頁面:

eventbus.$on("toothers",function(val){console.log(val)

最後一定要關閉eventbus

eventbus.$off('eventbusevent');

VUE 元件(二)元件通訊

元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時,就要用到自定義事件 子元件用 emit 來觸發事件,父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果,在改變元件data中的count後,通過 emit 將值傳給父元件,父元件用v o...

Vue 二 元件間通訊

父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣,右邊表示父元件中的資料元素 name name job job namewasreset name event res...

Vue元件知識點

定義vue元件 全域性元件定義的三種方式 第一種方式 1.先呼叫 vue.extend 得到元件的建構函式 建立全域性元件的第一種方式 component const com1 vue.extend 2.通過 vue.component 元件的名稱 元件的建構函式 來註冊全域性元件 使用 vue.c...