整 理:晋 哲 时 间: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实例-保险列表