vue组件之间的通信

父组件：

<template> <div class="hello"> <h1>{{ msg }}</h1> <Com :num="numtest" @add="add()" @del="del()"></Com> </div></template>
<script>import Com from './children/Com'export default { name: 'HelloWorld', data () { return { numtest:10 } }, methods:{ add(){ this.numtest++ }, del(){ this.numtest-- } }, components:{ Com }}</script>
子组件：

<template> <div> <button @click="add()">增加1+</button> <button @click="del()">点击减-</button> <p>{{num}}</p> </div></template><script>export default { props:{ num:Number }, data (){ return{ } }, methods:{ add(){ this.$emit("add") }, del(){ this.$emit("del") } }}</script>

在父组件中引用子组件，父组件可以向子组件传递参数,在父组件中绑定v-bind一个变量,在子组件中props声明该变量。
子组件向父组件传递参数：在父组件中绑定自定义事件@add="add" 在子组件中通过在methods:中写一个方法：this.$emit("绑定事件名")，通过$emit向父组件传递参数。