vue 中父子组件之间的交互

1，最直接的也是最简单的方法是利用props来数据传值。

子组件定义如下：

props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },

子组件修改了数据通过$emit来通知父组件。

父组件中通过添加属性来改变子组件的值。

<cheildren icon-class="icon" class-name="classname"></children>

2,父子组件方法相互调用

父组件可以通过ref这个属性来获取完整的子组件的所有属性，包括数据，方法。也就是完全获取子组件的这个vue实例。

子组件可以调用this.$parent[method]来执行父组件的方法。

3，不幸的是，使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：provide和 inject。

在父组件中去provide 一个方法。在子组件中去inject这个方法。就可以直接调用父组件的方法。

Vue.component('parent', {
  provide: function () {
    return {
      getMethods: this.getMethods
    }
  },
}
Vue.component('children', {
  inject: ['getMethods'],
}