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中：

         

        

实现效果：

---

未完待续……