vue中组件之间使用axios传值

1.使用axios传值的首先可以通过npm安装

npm install axios from 'axios'

2.安装成功后启动项目

使用语句 npm run dev
接下来进入项目中，在main.js里面引入并实例化

import axios from 'axios'
Vue.prototype.axios=axios

3.使用方法

我找了一个开源的api做了新闻列表接入，如下

html部分：

<ul>
          <li v-for="(item,key) in list" style="list-style:none;">
            <router-link :to="'/newscontent/'+(item.aid)">{{item.title}}</router-link>
          </li>
        </ul>

调用部分：
tips:在.then（）里面最好使用ES6的箭头函数，目的是统一方法内外的两个this对象，使外面的this对象等于指向里面的this对象

 methods: {
    getDate() {
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      this.axios.get(api).then(
        respon => {
          this.list = respon.data.result;
        },
        error => {}
      );
    }
  },
  mounted() {
    this.getDate();
  }

接收部分
1：当然，首先要使用路由布置传递方式，这里我使用的是动态路由匹配
在index.js文件中这样写

{
      path: '/newscontent/:aid',//动态路由匹配
      name: 'newscontent',
      component: Newscontent ,
    },

2：在要接受的组件中这样写

<template>
    <div>
        <div v-for="(item,key) in msg">
            <div v-html="item.content"></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:[]
        }
    },
    methods:{
        getDate(value){
            var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+value
            this.axios.get(api).then((respon)=>{
                
                this.msg=respon.data.result
            },(error)=>{

            })
        }
    },
    mounted(){
        var aid=this.$route.params.aid;//这里是动态路由接受参数的方式
        this.getDate(aid)
    }
}
</script>

写的不好或者不对的地方，欢迎指正