元件通訊

無論是面試還是做專案都是重點！！！！

父子元件通訊

父元件

檢視
<子元件 自定義屬性的名稱='你要傳遞的值' :自定義屬性的名稱='你要傳遞的變數'></子元件>

子元件

檢視
{{自定義屬性的名稱}}
邏輯程式碼
props:['自定義屬性的名稱1','自定義屬性的名稱2','自定義屬性的名稱3'...]

props屬性的驗證

這個驗證只是為了傳值更加的嚴謹，如果你覺得麻煩，你可以不用寫，你必須會看會用

props是自定義屬性，可以接收，父元件傳遞的資料。

props:['自定義屬性的名稱1']，這種形式並沒有對傳遞資料的型別進行驗證

驗證規則：
一、只驗證資料型別
props:{
    自定義屬性的名稱:String/Number/Boolean/Function/Array,
    自定義屬性的名稱:[String,Number,Boolean]//多資料型別驗證
}
二、新增預設值
props:{
    自定義屬性的名稱:{
        type:String/Number/Boolean/Function/Array,
        default:''//預設值
    }
}
三、必填項的驗證requried
props:{
    自定義屬性的名稱:{
        type:String/Number/Boolean/Function/Array,
        default:''//預設值,
        requried:true
    }
}
四、自定義規則驗證
props:{
    自定義屬性的名稱:{
        type:String/Number/Boolean/Function/Array,
        default:''//預設值,
        requried:true，
        validator(val){
        //在這個函式中，我們需要返回一個驗證的狀態，true是成功 false是失敗
     return true/false //根據你自己的規則
        }
    }
}
 

子父元件通訊

• 子元件

  檢視
  <button @click='子元件的事件名稱'>送給父親</button>
  ​
  程式碼
     methods: {
       子元件的事件名稱(){
       //this.$emit() 觸發事件，它有兩個引數，第一個引數是自定義事件名稱，第二個引數你要給父元件傳遞的資料
         this.$emit('自定義事件名稱',你要給父元件傳遞的資料)
       }
     },

• 父元件

檢視
<子元件 @自定義事件名稱='父元件的事件名稱'></子元件>
​
程式碼
  methods: {
   父元件的事件名稱(e){
    console.log(e,'事件源')
   }
  },
 

非父子元件通訊

非父子元件通訊

一、單一事件管理（你基本上未來都用不到）

• main.js

  Vue.prototype.變數名 = new Vue
  //new Vue() 因為它 有 $on 和 $emit

• 元件Ｂ

檢視
<button @click='事件名稱'>傳送資料給A</button>
邏輯
   methods: {
     事件名稱(){
       //觸發事件 $emit,兩個引數，事件名稱和資料
       this.原型上的變數名.$emit('自定義事件名稱',資料)
     }
   },

• 元件A

程式碼
  mounted() {
   //建立一個監聽器，實時監聽事件的變化
   //$on這個監聽器有兩個引數，一、是事件名稱，二、是回撥函式
   this.原型上的變數名.$on("自定義事件名稱", d => {
    //d是傳送的資料1
   });
  }
 

• 動態元件

  <component is='元件名稱'></component>

  <component :is='變數'></component>

• 元件快取

<keep-alive>要快取的內容</keep-alive>