随手vue笔记 (三)
随手vue笔记 (三)
1、代理服务器 解决跨域问题 vue.config.js
在vue根目录下新建一个 vue.config.js文件 ,文件内容如下:
方式一,当个服务
module.exports={ page:{ index:{ //入口 entry:'src/main.js' } }, lintOnSave:false, //关闭语法检查 //开启代理服务器 devServer:{ proxy:'http://localhost:5000' //后台地址 } }
页面请求内容
//前台页面内容 axios.get('http://localhost:5000/student').then(res=>res.data) //注意这里不能是用5000了,改成8080 axios.get('http://localhost:8080/student').then(res=>res.data)
方式二,多个服务
module.exports={ //开启代理服务器 devServer:{ proxy:{ '/api':{ target:'http://localhost:5000', pathRewrite:{'^/api':''},// 匹配一api开头的路径,把api变成 ''变成空字符串 ws:true, //用于开启websecket changeOrigin:true //用于控制请求头中的host值 }, '/demo':{ target:'http://localhost:5001', pathRewrite:{'^/demo':''}, //ws:true, //changeOrigin:true }, } } }
页面请求
//页面使用的时候 axios.get('/student').then(res=>res.data)
2、全局事件总线
首先在main.js中,加入事件总线
new Vue({ router, store, render: h => h(App), beforeCreate(){ //Vue.prototype.x = this //这里x是新增的属性,this指当前的vue实例 Vue.prototype.$bus = this //一般我们用bus来表示全局事件总线 }, }).$mount('#app')
现在已在 MyHeader.vue中使用一下
<template> <div class="container"> <input type="text" placeholder="请输入你的任务名称,按回回撤键确认" @keyup.enter = "sendMsg"> </div> </template> methods:{ sendMsg(e){ this.$bus.$emit('SendMsgContent',e.target.value) } }
在另一个MyItem.vue中使用SendMsgContent方法
mounted(){ //注意这里是在mouted中调用,也可以在create中调用,这里的data 就是上面传过来的 value值 ; 这里 'data=>' 这里要写成箭头函数 this.$bus.$on('SendMsgContent',(data)=>{console.log('data',data)}) }, beforeDestroy(){ this.$bus.$off('SendMsgContent') //注意用网之后一定要记得销毁 }
或者 (data)=>这里用一个函数接收
methods(){ demo(data){ console.log(data) } } mounted(){ this.$bus.$on('xxxx',this.demo) }
你须要知道的 scopedSlots
http://www.javashuo.com/article/p-ekxcfoth-bt.html