vue 組件通信分為父組件與子組件通信、子組件與父組件通信、非父子關(guān)系組件通信三種

第一種大家都知道用props，引用子組件的時(shí)候定義個(gè)自定義屬性，然后在子組件使用props接收

父組件

子組件

比如 addfolder是一個(gè)子組件 ，需要傳遞一個(gè)參數(shù)bucketId,（其他的可忽略）,bucketId可在data()定義,父子組件的寫法如圖所示

第二種子組件與父組件通信，可通過觸發(fā)事件來實(shí)現(xiàn)，個(gè)人理解類似于回調(diào)

父組件

父組件

子組件

比如tree為一個(gè)子組件，showtree為父組件的一個(gè)變量，那么要在子組件里修改父組件變量的值，傳一個(gè)自定義事件 showtreebox,在子組件用$emit的方式 觸發(fā)事件并傳過來參數(shù)值，就可以改變父組件的變量值了

第三種就是兄弟組件或者沒有邏輯關(guān)系的組件直接通信了，這時(shí)候就需要一個(gè)中轉(zhuǎn)站了

新建一個(gè)js文件比如命名為eventbus.js，創(chuàng)建一個(gè)事件中心

事件總線

然后在需要通信的組件引入這個(gè)文件

接收的組件注冊一個(gè)事件，名字為getTreeData ,這個(gè)事件執(zhí)行一個(gè)組件內(nèi)的方法 getTree()

接收的組件

在另外的組件觸發(fā)getTreeData事件就可以執(zhí)行了

觸發(fā)的組件