vue中组件之间使用axios传值

最新推荐文章于 2024-07-27 17:17:02 发布

不想差一点的前端菜鸟

最新推荐文章于 2024-07-27 17:17:02 发布

阅读量1.4k

点赞数

文章标签：前端 vue axios

本文链接：https://blog.csdn.net/qq_43339643/article/details/90520833

版权

这篇博客介绍了如何在Vue项目中通过axios传递值。首先通过npm安装axios，然后启动项目并引入实例化到main.js。接着展示了如何调用api获取新闻列表，包括HTML调用部分和接收部分的代码实现。同时提到了在.then()中使用箭头函数统一this对象的重要性，并给出了动态路由匹配的设置方法。

摘要由CSDN通过智能技术生成

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对象