## 創建組件的3種方法

# 第一種:
 + Vue.extend()函數返回一個組件的構造器,里面包含一個參數,參數是對象,對象里面是一些配置項
+ Vue.component()函數利用Vue.extend()返回的構造器創建一個組件的實例,有兩個參數.;
參數1:組件名字,參數2:組件構造器

 注意:
      模板template中只能有一個根節點

    組建的名字采用駝峰命名的話,使用時,就要加上"-"; 例如:組件名字indexA-->index-a;

## 第二種:
 + Vue.component('indexB',{模板})

## 第三種:
 + 通過制定模板創建,在Vue管轄范圍之外定義模板

## 總結:
 + 先制造一個模板,在創建組件

## 組件中使用指令:
 + 在Vue.component()里邊,有template模板,有data()函數,有methods()方法
+ 注意:data()必須是一個個函數.不能使用屬性定義;函數里邊return出去一個對象

## 父組件傳值給子組件的方法

* 先創建好父組件和子組件
* 在父組件的模板中的son,子組件標簽里綁定 :屬性 = 父組件需要傳遞的數據;
 * 在子組件的son{}中  使用props來接收父組件傳遞過來的數據;
 * props后跟一個數組,數組中是一個個字符串,這些字符串可以當成屬性使用,即props:['屬性名']

 * 代碼如下:

    *

Vue.component('father',{    template:'<div>....<son :myName="mySonName"></son></div>',    data(){      return{        mySonName:'小明'      }    },    //子組件    components:{      son:{        props:['myName'],        template:'...{{myName}}'      }    }  })

 ## 子組件傳值給父組件的方法
* 先創建好父組件和子組件;

* 在子組件methods方法中使用this.$emit()方法,
     * 這個方法有兩個參數;參數1:需要與父組件交換事件名稱,參數2:要傳遞的數據;

* 在父組件模板的son標簽中使用方法名的傳遞:

即,@tellFatherMyname = "getMySonName";

* 在父組件的methods方法中傳入data參數,這個data=子組件傳遞過來的數據,然后讓mySonName = data;*

代碼如下:     

<div id="app">    <father></father>  </div>  <script>    Vue.component('father',{      template:`<div>      <p>我的兒子告訴我他叫{{mySonName}}</p>      <son @tellFatherMyname="getMySonName"></son>      </div>`,      data(){        return {          mySonName:'???'        }      },      methods:{        getMySonName(data){          console.log(data);          this.mySonName = data;        }      },      components: {        son:{          data(){            return {            myName :'小明'            }          },          template:`              <button @click = "emitMyname">點擊就告訴父親我叫{{myName}}                        </button>`,          //在子組件的methods中使用this.$emit()來傳遞值;          //$emit()有2個參數;參數1:需要交換的事件名,參數2:要傳遞的數據;例             如:this.name          methods:{            emitMyname(){              this.$emit('tellFatherMyname',this.myName)            }          }        }      }    })    var vm = new Vue({      el:'#app',      data:{      }    })  </script>