随手vue笔记 (三)

随手vue笔记 (一)

随手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