父子组件间的通信

通信方式1(单向绑定): Props down, Events up (建议使用)

Props down, Events up 是指 使用props向子组件传递数据,父组件属性发生变化时,子组件可实时更新视图;子组件发生变化,可以使用$emit发送事件消息,以此向父组件传递变化消息。

props 是单向的,当父组件的属性变化时,将传递给子组件,但子组件中的props属性变化不会影响父组件的属性变化(props属性类型是Object除外)。倘若使用vue1.0的.sync强制双向,那么子组件的更改将会影响到父组件的状态,随着业务的增多,很容易让数据流变得难以理解,最终陷入痛苦的泥潭。因此,vue2.0已经剔除.sync,且不允许在子组件中更改自身的props属性。如果真的需要更改props,那一定是设计方案出了问题,请使用替代方案,如:在data选项或computed选项中再定义一个不同的变量进行数据转换。这是props down。

既然父组件可以通过props像子组件传递信息了,那子组件的数据变化如何通知到父组件呢?

$emit的出现便解决了这一问题,该方法用于 子组件向父组件发送事件消息,可带上子组件的数据信息一起发送,父组件接收到消息后,做出自身相应的变更。vue1.0 和vue2.0均支持$emit。这是events up。

如示例代码1,父组件通过 age(props) 向子组件传递数据信息,子组件拿到后,通过$emit向父组件传递最新状态。如果子组件涉及到可能会对age进行更改,则重新定义一个变量age$进行中转。

【示例代码1】

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式