深入理解Vue父子组件通讯的属性和事件

　　在html中使用元素，会有一些属性，如class,id，还可以绑定事件，自定义组件也是可以的。当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。

　　父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，子组件通过 事件events 给父组件发送消息。

　　比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。而当子组件内部发生了什么事情的时候，就通过自定义事件来把这个事情涉及到的数据暴露出来，供父组件处理。

<my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component>

　　如上代码：

　　　　foo是<my-component>组件内部定义的一个prop属性，baz是父组件的一个data属性，

　　　　event-a是子组件定义的一个事件，doThis是父组件的一个方法

　　过程就是这样：

　　　　父组件把baz数据通过prop传递给子组件的foo；

　　　　子组件内部得到foo的值，就可以进行相应的操作；

　　　　当子组件内部发生了一些变化，希望父组件能知道时，就利用代码触发event-a事件，把一些数据发送出去；

　　　　父组件把这个事件处理器绑定为doThis方法，子组件发送的数据，就作为doThis方法的参数被传进来；

　　　　然后父组件就可以根据这些数据，进行相应的操作。

1、属性Props

　　Vue组件通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。

Vue.component('mycomponent',{
    template: '<div>这是一个自定义组件,父组件传给我的内容是：{
  {myMessage}}</div>',
    props: ['myMessage'],
    data () {
      return {
        message: 'hello world'
      }
    }
  })

　　然后调用该组件

<div id="app">
    <mycomponent :my-message="hello"></mycom