Vue组件通信方式

每个组件都有自己独自的作用域，组件之间是无法共享数据的，但在开发中常常需要组件数据共享，这也是组件通讯的目的，相互之间进行通讯，形成一个完整的系统。

组件间通信的分类可以分成以下几类：

• 父子组件之间的通信props/$emit 

1. 父组件传递数据给子组件props：先有message值为hello，将值绑定给 :message

 2子组件接收数据：利用props。

 

 props有三种接收类型：

• 第一种方式（只接收）：

  props:['name']

• 第二种方式（限制类型）：

  props:{name:String}

• 第三种方式（限制类型、限制必要性、指定默认值）：

1. props:{
       name:{
       type:String, //类型
       required:true, //必要性
       default:'老王' //默认值
       }
   }

   子组件传给父组件需要$emit 。在子组件定义一个changeMessage，要传的值为Bye。

点击按钮时就把Bye给父组件的

 

• 兄弟组件之间的通信
• 祖孙与后代组件之间的通信
• 非关系组件间之间的通信