封裝元件的步驟

　　1.  建立元件的模板，先把架子搭起來，寫寫樣式，考慮好元件的基本邏輯。　　　

　　2.  準備好元件的資料輸入。即分析好邏輯，定好 props 裡面的資料、型別。

　　3.  準備好元件的資料輸出。即根據元件邏輯，做好要暴露出來的方法。

　　4.  封裝完畢了，直接呼叫即可。

程式碼詳解

　　1. 先說一下 props

　　　　我們在父元件中需要將子元件需要的資料匯入，用法如下：

<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

　　　　:searchList="searchList"  就是我們的資料，這個可以寫多個。這裡我傳輸了2個引數過去，主要是做資料修改的說明。大家可以先忽略。

　　　　在子元件中，我們的接收和使用方法如下：

props: {
      searchList: Array,
      selectValue: Object
    },
mounted() {
      this.data = this.searchList
    },

　　　　我們在 props 中接收資料，注意props物件裡面 鍵值 是對改資料的 資料型別 的規定。做了規範，使用者就只能傳輸指定型別的資料，否則報警告

　　　　而props物件中的資料，我們可以直接在當前元件中使用  this.searchList，可以直接使用。這裡要強調一下，props傳過來的資料只做展示，不得修改，想修改，再新寫一個data中的變數承接做資料的再處理。至於原因，同上，可以看一下js的原型。至於原理嘛，不懂的可以取腦補一下 js的原型 。　　　　

　　　　以上就是props傳遞過來的資料的使用了。

方法

   正兒八經的通過 $emit 方法去掉父元件的方法，在父元件中修改data的資料。

// 子元件
this.$emit('selectFunc', value)
// 父元件
<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

selectFunc(value) {
        this.selectValue2 = value
        console.log(this.selectValue)
        console.log(this.selectValue2)
      }

　　　　將父元件的方法注入子元件  @selectFunc="selectFunc" ，然後在子元件中通過 $emit 呼叫他，並傳遞引數。達到修改的目的。