vue学习记录——父子组件间传递数据

在 Vue 中，父子组件之间的关系可以概述为：props 向下，events 向上。父组件通过 props向下传递数据给子组件，子组件通过 events 发送消息给父组件。

demo的目录结构如下：

demo显示效果如下;

一、父组件向子组件传递数据（父组件通过props向子组件传递数据）

父组件的代码如下图：

父组件中定义一个object，通过v-bind自定义属性parentData绑定到控件上，通过parentData传给子组件，在子组件的props中获取parentData传递过来的数据

子组件中的代码：

在 props 中添加了元素之后，就不需要在 data 中再添加变量了

二、子组件向父组件传递数据（子组件主要通过事件向父组件传递数据）

父组件代码如下：

父组件通过自定义childData事件获取从子组件传递来的数据

子组件代码如下：

子组件中input输入框中有所变化时会调用changeUser方法，该方法中通过$emit将this.uername值传给父组件

参考资料：http://www.cnblogs.com/wisewrong/p/6266038.html