Vue组件创建和传值的方法

## 创建组件的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>