【Vue2-尚硅谷四】Vue ---ajax---插槽slot

4.1,vue脚手架配置代理

方法一

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

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

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

​ 编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

4.2,GitHub搜索案例

效果

GitHub用户搜索api

https://api.github.com/search/users?q=xxx
#安装Axios
npm install axios

入口main.js

/*
入口文件
 */
//引入Vue
import Vue from 'vue'
//引入App组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建Vue实例对象---vm
new Vue({
   el:'#app',
   render: h => h(App), //将App组件放入容器中
   beforeCreate() {
      Vue.prototype.$bus = this
   }
})
//.$mount('#app') = el:'#app'

App.vue

Search.vue

List.vue

4.3,slot插槽

4.3.1,默认插槽—slot

Category.vue----定义一个插槽

<template>
 <div class="category">
  <h3>{{title}}分类</h3>
  <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
  <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
 </div>
</template>

App.vue—往里面放

<template>
 <div class="container">
  <Category title="美食" >
   <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
  </Category>

  <Category title="游戏" >
   <ul>
    <li v-for="(g,index) in games" :key="index">{{g}}</li>
   </ul>
  </Category>

  <Category title="电影">
   <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
  </Category>
 </div>
</template>

4.3.2,具名插槽—slot name=‘xx’

给slot添加一个名字, 插入的时候指定名字

Category.vue

<template>
 <div class="category">
  <h3>{{title}}分类</h3>
  <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
  <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
  <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
 </div>
</template>

App.vue

<template>
 <div class="container">
  <Category title="美食" >
   <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
   <a slot="footer" href="http://www.atguigu.com">更多美食</a>
  </Category>

  <Category title="游戏" >
   <ul slot="center">
    <li v-for="(g,index) in games" :key="index">{{g}}</li>
   </ul>
   <div class="foot" slot="footer">
    <a href="http://www.atguigu.com">单机游戏</a>
    <a href="http://www.atguigu.com">网络游戏</a>
   </div>
  </Category>

  <Category title="电影">
   <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
   <template v-slot:footer><!--使用template不会创建元素, 可以使用vue2.6新写法v-slot:插槽名-->
    <div class="foot">
     <a href="http://www.atguigu.com">经典</a>
     <a href="http://www.atguigu.com">热门</a>
     <a href="http://www.atguigu.com">推荐</a>
    </div>
    <h4>欢迎前来观影</h4>
   </template>
  </Category>
 </div>
</template>

4.3.3,作用域插槽(插槽传递数据给使用者)

定义插槽, 通过插槽想使用者传参

Category.vue

<template>
 <div class="category">
  <h3>{{title}}分类</h3>
  <slot :games="games" msg="hello">默认内容,没放东西显示这段文字</slot>
 </div>
</template>

<script>
 export default {
    // eslint-disable-next-line vue/multi-word-component-names
  name:'Category',
  props:['title'],
  data() {
   return {
    games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
   }
  },
 }
</script>

<style scoped>
 .category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
 }
 h3{
  text-align: center;
  background-color: orange;
 }
 video{
  width: 100%;
 }
 img{
  width: 100%;
 }
</style>

App.vue

<template>
 <div class="container">

  <Category title="游戏">
   <template scope="youxi">
    <ul>
     <li v-for="(g,index) in youxi.games" :key="index">{{g}}</li>
    </ul>
   </template>
  </Category>

  <Category title="游戏">
   <template slot-scope="{games}">
    <ol>
     <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
    </ol>
   </template>
  </Category>

  <Category title="游戏">
   <template v-slot="{games}">
    <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
   </template>
  </Category>

 </div>
</template>

<script>
 import Category from './components/Category'
 export default {
  name:'App',
  components:{Category},
 }
</script>

<style scoped>
 .container,.foot{
  display: flex;
  justify-content: space-around;
 }
 h4{
  text-align: center;
 }
</style>

4.3.4,总结

v-slot是Vue 2.6.0更新添加的，取代的是slot，slot-scope，scope这三个属性，已被废弃但未移除的

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

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

3. 使用方式：

   1. 默认插槽：

      父组件中：
              
                 
      html结构1
              
      子组件中：
              
      

   2. 具名插槽：

      父组件中：
              
                  
      
                  
              
      子组件中：
              
      

   3. 作用域插槽：

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

      2. 具体编码：

         父组件中：
         		
         			
         		
         
         		
         			
         		
         		
         			
         		
         子组件中：