vue组件之间的通信

compoent为父组件，component1 为子组件

<template>
    <div id = 'counter-event-example'>
      <p>{{total}}</p>
      <component1 :message="xl"  v-on:increment = "incrementTotal"></component1>
      <!--<component1 message="xl" v-on:increment = "incrementTotal"></component1>-->
    </div>
</template>

<script>
    import component1 from './component1.vue'
    export default {
        name: "component",
        data(){
          return {
            total: 0,
            xl:"I am xl"
          }
        },
        methods:{
          incrementTotal:function () {
          this.total +=1
          }
        },
        components:{
          component1
        }
    }
</script>

<style scoped>

</style>

父组件向自组件传递了一个message值，在自组件中使用props来接收。
component1为子组件

<template>
  <div>
    <button v-on:click="incrementHandler">{{counter}}</button>
    {{message}}
  </div>
</template>

<script>
    export default {
        props:{
          message:{
          }
        },
        name: "component1",
        data(){
          return{
            counter:0
          }
        },
        methods:{
          incrementHandler:function () {
            this.counter +=1;
            this.$emit('increment')
          }
        }
    }
</script>

<style scoped>

</style>

子组件在点击按钮的时候触发 子组件 自定义事件this.$emit(‘increment’)，
子组件执行相应功能。