vue再次入手（数据传递①）
准备
之前使用vue.js完成一个项目之后，对其还是充满着无限兴趣，于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架。
1.新建一个基于vue的项目，具体方法不再赘述，请看这里：http://www.cnblogs.com/zhengyeye/p/6245053.htmlhttp://www.cnblogs.com/zhengyeye/p/6245053.html；
2.新建好项目之后，其实为了方便起见，我们也可以设置一下基于webstrom下的vue项目的快速运行方式，可以参考老大写的：http://www.cnblogs.com/vipstone/p/6772813.html；
3.在http://localhost:8080端口可以运行该项目后，我们便继续往下研究。
再次入手研究，参考：http://www.cnblogs.com/wisewrong/p/6266038.html
过程
分为3部分：①父组件向子组件传递数据；②子组件向父组件传递数据；③互通
1.父组件向子组件传递数据，官网描述：
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用
props选项声明它期待获得的数据：
2.在原有项目上再添加新的子组件，目录路径如下：
3.其中header.vue中主要代码（css样式可以自己写哦~）：
App.vue:
3.再次运行后，就出现了我们想要的效果（此时是父组件向子组件传递数据的例子）。
4.子组件向父组件传递数据，官网描述：
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
使用
v-on绑定自定义事件,每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件- 使用
$emit(eventName)触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是
$on和$emit不是addEventListener和dispatchEvent的别名。另外，父组件可以在使用子组件的地方直接用
v-on来监听子组件触发的事件。不能用$on侦听子组件抛出的事件，而必须在模板里直接用v-on绑定，就像以下的例子：
子组件login.vue中：
关于$emit：
&&：vm.$emit( event, […args] ) 参数：触发当前实例上的事件。附加参数都会传给监听器回调。
{string} event[...args]
父组件App.vue中：
实现效果：
未完待续……
以上是 vue再次入手（数据传递①） 的全部内容， 来源链接： utcz.com/z/378625.html
