Vue框架学习笔记-8

Vue中的跨域问题

在Vue项目中遇到跨域问题，通常是因为前端（Vue）和后端（如Node.js, Django, Spring Boot等）部署在不同的域名或端口上，浏览器出于安全考虑，会阻止跨域请求。解决Vue中的跨域问题主要有以下几种方法：我们主要了解在前端如何解决跨域问题。
代理服务器
在开发环境下，Vue CLI项目可以通过配置vue.config.js文件来设置代理，从而绕过浏览器的跨域限制。这种方法只适用于开发环境。

// vue.config.js  
module.exports = {  
devServer: {  
 proxy: {  
  '/api': {  
    target: 'http://example.com', // 后端接口域名  
    changeOrigin: true, // 是否跨域  
    pathRewrite: {'^/api': ''} // 重写路径，例如将/api/xxx重写为/xxx  
  }  
}  
  }  
}

组件之间传递数据的方式

在Vue-cli项目中组件数据的传递方式有很多种，如下列出的是父子组件的传递方式：
1.正向(向下)传递数据–>父组件给子组件通过自定义属性传递数据,子组件用props接收

//父组件中
<div id="app">
    <!-- 自定义属性 -->
    <showstr :parentstr="showstr"> </showstr>
</div>
//子组件接收数据
Vue.component("showstr",{
    template:"#showstr",
    data(){
        return{
        }
    },
    // 接收从父组件向下传递的数据
    props:["parentstr"]
})

2.逆向传递数据(Vue不支持逆向传递)–>子组件给父组件传递,通过 $ emit(“事件名”,要传递的数据),自定义监听事件接收

//子组件定义自定义监听事件
Vue.component("search",{
    data(){
        return {
        }
    },
    methods:{
        // 点击搜索按钮,将str向上传递给实例
        search(){
           
            this.$emit("sousuo",this.str);
        }
    }
})

//父组件通过自定义监听事件监听了子组件向上传递过来的数据
<div id="app">
    <search @sousuo="searchStr"></search>
</div>

3. $ refs–>获取所有的组件
   
   
   通过$refs进行子组件的数据的修改。

4. $ children从父组件中获取所有的子组件(获取到的是一个数据)
   
   我们可以发现，通过$children获取到的是一个子组件数组，其中包含该组件的所有子组件。

5. $ parent通过子组件获取父组件
   
   
   在子组件中使用$parent获取到了父组件的所有信息。还可以对父组件中的信息进行修改。

6. 中央事件总线 $ emit()传递数据,$on()接收数据
   定义：中央事件总线是一个全局的Vue实例，它不渲染任何DOM元素，只用于组件间的通信。
   原理：通过在这个Vue实例上触发（emit）和监听（on）事件，组件可以发送和接收消息，而不需要直接引用对方组件。

创建与使用：
1.创建中央事件总线

新建bus目录，创建bus.js文件

import Vue from "vue";
export default new Vue();

或者：

在项目文件的main.js文件中的实例对象中加上如上代码。也就是将中央事件总线挂载到原型链上。

2.在组件中使用：
发送消息：在组件中，通过this.$bus.$emit(‘eventName’, data)来触发事件，其中eventName是事件的名称，data是要传递的数据。
接收消息：在另一个组件中，通过this.$bus.$on(‘eventName’, callback)来监听该事件。当事件被触发时，会执行回调函数callback，并将传递的数据作为参数传入。


$ emit()方法给其他组件传递数据
通过$on(“传递的数据名称”,回调函数)接收中央事件总线传递过来的数据(该方法中的回调函数必须时箭头函数)