Vue组件之间传值

1.Vue组件之间传值

1.1父组件向子组件传值

　　1.组件内部通过props接收传递过来的值

　　2.父组件通过属性将值传递给子组件

• 父组件发送的形式是以属性的形式绑定值到子组件身上。

  
  



• 然后子组件用属性props接收

  
  



• 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

  
  

  {{pmsg}}

  
  
  
  
  
  
  
  
  ​
  

   

  
  

3.props属性名规则

在props中使用驼峰形式，模板中需要使用短横线的形式

字符串形式的模板中没有这个限制

1.2子组件向父组件传值

　　1.子组件通过自定义事件向父组件传递信息

　　　　扩大父组件中内容的字体大小

　　2.父组件监听子组件的事件

• 子组件用$emit()触发事件

  
  



• $emit()  第一个参数为 自定义的事件名称     第二个参数为需要传递的数据

  
  



• 父组件用v-on 监听子组件的事件

  
  

1.3非父子组件间传值-兄弟之间的传递

　　1.单独的事件中心管理组件间的通信

　　　　var hub = new Vue();

　　2.监听事件与销毁事件

　　　　hub.$on('jerry-event', jerryEvent)

　　　　hub.$off('jerry-event');

• 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据  

  
  
  
  

  • 提供事件中心    var hub = new Vue()

    
    
  
  
  
  



• 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)

  
  



• 接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名

  
  



• 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据