vue父子组件的通信

案例是实现一个子组件里包含两个button，分别为“+”、“-”，对父组件的数字进行加减运算

子组件

<template>
  <div>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    <p><span>{{num}}</span></p>
  </div>
</template>
export default{
    props:["num"],
    methods:{
      increment(){
        this.$emit("incre");
      },
      decrement(){
        this.$emit("decre");
      }
    }
  }

父组件

<template>
  <div class="hello">
    <counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></counter>
    <p>parent:{{num}}</p>
  </div>
</template>

<script>
import counter from './counter.vue';

export default {
  data () {
    return {
      num:0
    }
  },
  methods:{
    increment(){
      this.num ++;
    },
    decrement(){
      this.num --;
    },
  },
  components:{
    counter
  }
}
</script>

父组件往子组件传递：props

在定义子组件时需加上props属性，内容为数组

props:["num"]

无论父组件的num出于怎样的变化，子组件的num都会跟随变化

子组件往父组件传递：$emit()

父组件自身可以改变num，此情况比较简单，但偶尔需要子组件来触发父组件的变化，诸如合计功能，子组件的单项数值改变，父组件的合计值需要随之更改，此时，需要v-on子组件的$emit事件，触发父组件自身的方法，改变num。

 <counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement">

其中“incre”、“decre”都是子组件$emit的内容，而“increment”、“decrement”为父组件的事件。