vueJs父子组件通信以及vue-resource的使用

整   理：晋 哲

时   间：2017-01-03

说   明：实例展示vueJs如何调取数据

一、父子组件基本代码块

/* 父组件 */
<div id="product_list">
    <nav-item></nav-item>
</div>

/* 子组件模块 */
<template id="nav-model">
    ……
</template>

/* 子组件对象 */
Vue.component('nav-item', {
    template: '#nav-model',
    ……
});

/* 主体构造器 */
var ins = new Vue({
    el: '#product_list',
    data: [
        ……
    ],
});

二、父子组件自定义事件，用于在组件树中通信
使用 $on() 监听事件；
使用 $emit() 在它上面触发事件；
使用 $dispatch() 派发事件，事件沿着父链冒泡；
使用 $broadcast() 广播事件，事件向下传导给所有的后代。

三、常用父子组件通信方式
1、父组件向子组件传递数据
使用 Props 传递数据

2、子组件向父组件传递数据
使用 $on() 监听事件；
使用 $emit() 在它上面触发事件。

四、vue-resource的使用（在一个Vue实例内使用$http）
1、GET请求
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

2、POST请求
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

参考网址：
http://vuejs.org.cn/guide/components.html#使用-v-on-绑定自定义事件
http://www.doc00.com/doc/1001004eg

实例代码请看源代码
vue实例-保险列表