vue组件通信

改变props情况：①作为初始值使用；②计算方法

（1）父元素props→子元素

父元素数据通过props传递给子元素

  <div id="demo">
    <demo-area v-bind:message="message"></demo-area>
  </div>
  <script type="text/javascript">
    Vue.component('demo-area',{
      props:['message'],
      template:`
        <div>
          {{message}}
        </div>
      `
    });
    var demo = new Vue({
      el:'#demo',
      data:{
        message:'来自父元素的数据'
      }
    })
  </script>

（2）自定义事件

  <div id="demo">
    <demo-area v-bind:message="message" v-on:show-value="showChangeValue"></demo-area>
  </div>
  <script type="text/javascript">
    Vue.component('demo-area',{
      props:['message'],
      template:`
        <div>
          {{message}}
          <button v-on:click="change('点击按钮改变，现在是来自子元素的数据')">按钮</button>
        </div>
      `,
      methods:{
        change(val) {
          let data = {value:val};
          this.$emit('show-value',data);/*change事件触发后，自动触发show-value事件*/
        }
      }
    });
    var demo = new Vue({
      el:'#demo',
      data:{
        message:'来自父元素的数据'
      },
      methods:{
        showChangeValue(data){
          this.message = data.value;
        }
      }
    })
  </script>

子组件可以使用 $emit 触发父组件的自定义事件。

语法格式：

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

分布：

　①子组件添加事件

<button v-on:click="change('点击按钮改变，现在是来自子元素的数据')">按钮</button>

②子组件添加方法和$emit(event事件名称,arg传值)

    methods:{
        change(val) {
          let data = {value:val};
          this.$emit('show-value',data);/*change事件触发后，自动触发父组件的show-value事件，传递给父组件*/
        }
      }

③父组件添加事件

<demo-area v-bind:message="message" v-on:show-value="showChangeValue"></demo-area>

④父组件添加方法

    methods:{
        showChangeValue(data){
          this.message = data.value;
        }
      }

（小结）组件间通信：

父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

父组件->子组件：

组件实例的作用域是孤立的，不能在子组件直接用父组件的数据。 
父组件向子组件传递数据时，可以在组件上使用自定义属性绑定数据，在组件中需要显示的用props声明自定义属性。

子组件->父组件：

子组件向父组件传递数据时，需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件。
父组件用v-on用来监听子组件的事件是否触发了来作出相应的处理。

ps:父组件通过props向下传递数据给子组件，子组件通过events给父组件传递消息。父组件通过自定义属性向子组件传递时，需要显示声明props：["attrName"]。

子组件通过$emit(event,[...args])方法触发当前实例上的事件，把事件沿着作用域链向上传递，直到父组件接收到该事件作出相应反应。