封裝vue組件

步驟一：創建子組件（封裝內容）

1. 在components中創建vue文件
   （以settingSwitchTemplate.vue 爲例）
   

2. 在settingSwitchTemplate.vue中畫出抽象出的功能

   1）包含template和style 文件
   
   

   2）包含SCRIPT，在這裏面書寫正常的方法和我們需要接收參數的PROPS
   

   注意：加載順序：props的優先級 > data中的優先級 > methods中的優先級

3. props參數說明參照官網：https://cn.vuejs.org/v2/api/#props

步驟二：父組件調用（調用地方）

1. 在父組件的script中引用和聲明

   
   

2. 在template中使用

3. 父組件向子組件傳遞參數

   
   注意：這裏的參數值是變量，從後端傳遞過來的值

4. 顯示結果：我們這裏只有一個，可以使用for循環顯示多個，也可以調用多個此組件
   

   步驟三：子組件將數據回調給父組件

   1. 子組件方法中傳參：使用$emit(“”,””)
      

      checkedDisplay當值改變的時候調取的方法，根據需要改變名稱
      listenToChildEvent：對應我們父組件的聲明方法的地方，根據需要改變名稱
      this.childValue：表示將當前的值傳遞過去 ，根據需要改變名稱
      

   2. 父組件中template接收值

      listenToChildEvent：和子組件名稱一致
      childBySwitchValue：父組件自己定義的方法名稱
      

   3. 父組件中接收方法

      childBySwitchValue：父組件template中的具體方法名
      childValue：子組件中傳遞過來的值的名稱，和子組件名稱一致,這裏不用聲明此變量
      

   注意：父組件中接收的方法childBySwitchValue是不能在父頁面再次傳值的，否則會覆蓋掉子組件傳遞的值。