Vue2 API的使用

组件通信 1.1父传子用props

最终效果：

1.2子传父用$emit()

最终效果： 注意： 父子组件通信都是作用在父组件的子组件标签上  2.祖孙组件间通信有：$attrs和$listeners、provider和inject等等 2.1.1祖传孙$attrs

参考链接：详细讲解vue中祖孙组件间的通信之使用$attrs和$listeners的方式 - 知乎

前提：这里把App.vue假设为祖组件，parent.vue为父组件，child.vue为孙组件。

解释：传值流程是祖组件到父组件再到孙组件。祖组件在父组件标签上动态传值给父组件，父组件可以通过$attrs接收，再在孙组件标签上加上v-bind="$attrs"，孙组件加上 inheritAttrs: false,通过props接收。

注意：

v-bind="$attrs"不可以简写成:$attrs，v-on="$listeners"不可以简写成@$listeners，会报错。

最终效果：

2.1.2孙传祖$listeners

解释：传值流程是孙组件到父组件到祖组件。孙组件触发事件通过$emit('方法名，值)传递参数到父组件，父组件上子组件标签加上v-on="$listeners"，祖组件通过v-on绑定方法名，用一个新方法接收传递过来的值去应用。

template> //祖组件
  
      App祖组件
      
祖组件收到的值={{msg}}
      
  

最终效果：