vue父子组件通信

一、父组件利用props往子组件传输数据

父组件：

<div>
  <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用—代替驼峰命名，HTML不区分大小写
</div>

子组件：

Vue.component('child', {
  // camelCase in JavaScript
  props:{myMessage},
  template: '<span>{{ myMessage }}</span>'
}) 

二、子组件向父组件传递参数利用事件机制

子组件通过this.$emit()派发事件，父组件利用v-on对事件进行监听，实现参数的传递

子组件：

   this.$emit('changeCart',event.target)/*向父组件派发事件，同时传递参数event.target,后面的参数的个数不限*/

父组件：

<v-cartcontrol :food="food" v-on:changeCart="changeCart"></v-cartcontrol>

三丶父组件调用子组件方法

在父组件中引用子组件并定义ref

<v-food  ref="selectfood"></v-food>

调用定义在子组件中的方法show

this.$refs.selectfood.show();//同时也可以调用子组件中的属性