VUE 元件間通訊---單向資料流

_王驍凱發表於2019-10-11
Vue元件

vue的單向資料流 ???

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。

個人理解：你父親能他的基因遺傳給你，而你卻不能把基因給你父親

Vue 的父元件和子元件生命週期鉤子函式執行順序可以歸類為以下 4 部分：
  1. 載入渲染過程： 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  2. 子元件更新過程： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  3. 父元件更新過程： 父 beforeUpdate -> 父 updated
  4. 銷燬過程： 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在一個子元件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。子元件想修改時，只能通過 $emit 派發一個自定義事件，父元件接收到後，由父元件修改。有兩種常見的試圖改變一個 prop 的情形 :

  • 這個 prop 用來傳遞一個初始值；這個子元件接下來希望將其作為一個本地的 prop 資料來使用。 在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值
  • 這個 prop 以一種原始的值傳入且需要進行轉換。 在這種情況下，最好使用這個 prop 的值來定義一個計算屬性
如何子代修改父代
  • 訂閱自定義事件：呼叫元件的時候基於屬性傳遞一個方法 （父）
<my-component @func='xxx'></my-component>

new Vue({
  methods:{
    xxx(value){
      //=>value是this.$emit時候傳遞的第二個引數值
    }
  }
});
複製程式碼
  • 通知自定義事件執行 （子）
{
  methods:{
    xxx(){
      this.$emit('func',10);
    }
  }
}
複製程式碼
  • 也可以基於此方法實現兄弟元件（父子元件、隔代元件）之間的資訊通訊
let eventBus=new Vue; //=>建立事件匯流排

//A元件
eventBus.$on('xxxA',this.func);

//B元件
eventBus.$emit('xxxA');
複製程式碼
基於ref實現父子元件資訊通訊
  • ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項，基於此可以快速獲取和操作子元件中的資料
  • $parent和$children是獲取元件和子元件的例項，只不過$children是一個陣列集合，需要我們記住元件順序才可以
基於provide和inject實現祖先與後代的通訊
  • 祖先元件基於provide註冊需要供後代元件使用的資料
{
  provide:{ //=>物件或者返回物件的函式都可以（屬性值如果是data中的資料，則必須使用函式的方法進行處理）
    name:'eggs',
    year:10
  },
  ...
}
複製程式碼
  • 後代元件基於inject宣告需要使用的資料並調取使用
{
  inject:['name'],
  methods:{
    func(){
      let name=this.name;
    }
  }
}
複製程式碼

相關文章