/** * 简单配置axios以及封装子组件 * 1、下载 npm install axios * 2、文件目录: * plugin/axios/index.js * import axios from 'axios' * axios.defaults.timeout = 30000 请求超时时间为30s 注意defaluts是有s的 * axios.defaults.withCredentails = true 大概是允许跨域请求的意思 * axios.defaults.baseURL = process.env.NODE_ENV === 'development'?'':'' 默认下是开发模式 * 最后一步 * export defalut{ * install(vue){ * vue.prototype.$http = axios 请求时调用 this.$http.post 或者thi.$http.get * } * } * * plugin/api/index.js 用来存放接口 * 例如: * let api = { SCORE: 'student/score' //这个接口在easymock上已经模拟好了 }; export default { install (Vue) { Vue.prototype.$api = api; } } 3、上面写好了api/index.js 以及 axios/index.js,还需要在main.jg中引进来 import api '../plugin/api/index.js' //找准路径 import axios '../plugin/axios/index.js' Vue.use(api) Vue.use(axios) 4、已经简单写了axios的请求,然后是该用一下 那么,我将会封装一个简单的子组件,在父组件下请求数据,再渲染到子组件中。 同样,另起一个文件存放子组件,方便调用。 /components/common/PContainer.vue 内容:(简单粗暴) <template> <div class="p_container"> <ul> <li v-for="(item,index) in data" :key="index"> <p>姓名:{{item.name}}</p> <p>分数:{{item.score}}</p> <p>日期: {{item.date}}</p> </li> </ul> </div> </template> <script> export default { name: "PContainer", data () { return { } }, props:{ data:Array //接受父组件传进来的dataList } } </script> <style scoped> li{ margin-bottom:20px; } </style> /components/index.js 注册组件 import Vue from 'vue' import PContainer from './common/PContaier' Vue.component('PContainer',PContainer) //注册为全局组件 export{ PContainer } 还要记得在main.js中引进!!!刚开始忘记了,结果报错p-container没有正确注册 main.js文件下: import '../components/index.js' 接下来我在父组件中使用这个子组件 内容:(简单粗暴) <template> <div class="demo_router"> <div> <p-container :data="scoreList"></p-container> </div> </div> </template> <script> export default { name: "demo", data () { return { scoreList: [] } }, methods: { init () { this.$http.get(this.$api.SCORE).then(res=>{ this.scoreList = res.data.data }) } }, mounted () { this.init() } } </script> <style scoped> </style> * */
简单配置axios以及封装子组件
猜你喜欢
转载自blog.csdn.net/qq_38401285/article/details/85259520
今日推荐
周排行