vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

axios 用法：

1.安装

npm install axios --save-dev

2.导入

import axios from 'axios';

3.使用

axios.post(url,params)
	.then(function(res){
		console.log(res);
		alert(res.data);
	})
	.catch(function(err){
		console.log(err);
	})

4. vue2.0 子组件和父组件之间的传值 

Vue是一个轻量级的渐进式框架，对于它的一些特性和优势在此就不作赘述，本篇文章主要来探讨一下Vue子父组件通讯的问题

首先咱们先搭好开发环境，咱们首先得装好git和npm这两个工具(若是有不清楚的同窗请自行百度哦)

环境搭建步骤：

• 打开git ，运行 npm install --global vue-cli 这是安装vue的命令行
• vue init webpack vue-demo 这是vue基于webpack的模板项目
• cd vue-demo 进入vue-demo文件夹
• npm install 安装package.json中依赖的node_modules
• npm run dev 运行该项目

刚刚咱们建立的是vue基于webpack工具的一个模板项目，对于webpack和热加载这些不熟悉的同窗没必要在乎，咱们如今不会过多关注webpack的，不过建议对vue有兴趣的同窗仍是去了解一下webpack，它也算是vue开发中的一个必备工具

---

接着咱们进入Demo，首先咱们能够删除掉模板项目中src/components/Hello.vue,而后在App.vue中删除对于Hello子组件的注册和使用还有一些其余可有可无的东西，此时的App.vue应为这样

App.png

一.父组件向子组件传值

1.建立子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中建立props，而后建立一个名为message的属性

child.png

3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

App2.png

4.保存修改的文件，查看浏览器

browser.png

5.咱们依然能够对message的值进行v-bind动态绑定

App3.png

此时浏览器中

browser2.png

父组件向子组件传值成功
总结一下：

• 子组件在props中建立一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中建立的属性
• 把须要传给子组件的值赋给该属性

---

二.子组件向父组件传值

1.在子组件中建立一个按钮，给按钮绑定一个点击事件

Child2.png

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

Child3.png

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

App4.png

4.保存修改的文件，在浏览器中点击按钮

browser3.png

子组件向父组件传值成功
总结一下：

• 子组件中须要以某种方式例如点击事件的方法来触发一个自定义事件
• 将须要传的值做为$emit的第二个参数，该值将做为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通讯中，不管是子组件向父组件传值仍是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通讯就好理解了

.