Vue第四章Vue中的Ajax：跨域问题、slot插槽

本文主要是介绍Vue第四章Vue中的Ajax：跨域问题、slot插槽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

第四章、Vue中的Ajax

一、配置代理（跨域问题）

方法一：

在vue.config.js中添加如下配置：

devServer:{proxy:"http://localhost:5000"
}

1、优点：配置简单，请求资源直接发给前端即可

2、缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理（优先匹配前端资源）

方法二：

module.exports = {devServer:{proxy:{'/api1':{//匹配所有以'/api1'开头的请求路径target:'http://localhost:5000',changeOrigin:true,pathRewrite:{'^/api1s:':''}},'/api2':{//匹配所有以'/api1'开头的请求路径target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2:':''}},}}
}

1、优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2、缺点：略微繁琐

二、vue-resource（不常用）

npm i vue-resource

import vueResource from 'vue-resource'
Vue.use(vueResource)

三、slot插槽

1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式，适用于父组件====>子组件

2、分类：默认插槽、具名插槽、作用域插槽

3、使用方式：

默认插槽：

父组件中：
<Category><div>html结构1</div>
</Category>
子组件中：
<template><div><slot>插槽默认内容</slot></div>
</template>

具名插槽：

父组件中：
<Category><template slot="center"><div>html结构1</div>          </template><template v-slot:footer><div>html结构2</div>          </template>
</Category>
子组件中：
<template><div><slot name="center">插槽默认内容</slot><slot name="footer">插槽默认内容</slot></div>
</template>

作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（game数据在Category子组件中，但使用数据所遍历出来的结构又父组件App决定）

父组件中：
<Category><template scppe="scopeData"><!--生成ul列表--><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template>
</Category><Category><template scppe="scopeData"><!--生成h4--><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template>
</Category>
子组件中：
<template><div><slot :games="games"></slot></div>
</template><script>export default{name:'Category',//数据在子组件自身data(){return{games:['game1','game2','game3','game4']}}}
</script>

这篇关于Vue第四章Vue中的Ajax：跨域问题、slot插槽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---