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

xbd_zc

已于 2022-04-26 22:35:58 修改

阅读量243

点赞数

分类专栏：框架前端文章标签： vue.js vue 前端框架

于 2022-04-26 22:34:50 首次发布

本文链接：https://blog.csdn.net/xbd_zc/article/details/124439102

版权

框架同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

前端

12 篇文章 0 订阅

订阅专栏

文章目录

4.1,vue脚手架配置代理

方法一

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

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

说明：

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

方法二

编写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
*/

说明：

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

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

<template>
    <div class="container">
      <Search/>
      <List/>
    </div>
</template>
<script>
  // import pubsub from "pubsub-js";
 //引入组件
  import List from "./components/List";
  import Search from "./components/Search";
 export default {
  name:'App',
    components:{
      List,Search
    },
  }

</script>

Search.vue

<template>
    <div>
      <section class="jumbotron">
        <h3 class="jumbotron-heading">搜索 Github 用户</h3>
        <div>
          <input type="text"
                 placeholder="输入用户名搜索用户" v-model="keyWord"/>&nbsp;
          <button @click="searchUsers">搜索</button>
        </div>
      </section>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Search",
  data(){
    return {keyWord : ''}
  },
  methods:{
    searchUsers(){
      this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[] })
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
          response => {
            // console.log('请求成功',response.data.items)
            this.$bus.$emit('updateListData',{isLoading:false,errMsg:'', users:response.data.items})
          },
          error => {
            // console.log('请求失败',error.message)
            this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[] })
          }
      )
    }
  }
}
</script>

List.vue

<template>
  <div class="row">
    <!-- 展示用户列表   -->
    <div v-show="info.users.length" class="card" v-for="user in info.users " :key="user.login">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style='width: 100px'/>
      </a>
      <p class="card-text">{{user.login}}</p>
    </div>
  <!-- 展示欢迎词   -->
    <h1 v-show="info.isFirst">欢迎使用!</h1>
  <!-- 展示加载中-->
    <h1 v-show="info.isLoading">加载中...</h1>
    <!-- 展示错误信息-->
    <h1 v-show="info.errMsg">请求失败, 错误:{{info.errMsg}}</h1>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "List",
  data(){
    return {
      info: {
        users: [],
        isFirst: true,
        isLoading: false,
        errMsg: ''
      }
    }
  },
  mounted() {
    this.$bus.$on('updateListData',(dataObj)=>{
      // console.log(dataObj)
      this.info= {...this.info,...dataObj};//ES6: info和dataObj数据对比, 没数据不修改,重名属性以后面dataObj为准
    })
  }
}
</script>

<style scoped>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>

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这三个属性，已被废弃但未移除的

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

父组件中：
        <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>

作用域插槽：

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

具体编码：

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
		<Category>
			<template v-slot="{games}">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

xbd_zc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue2-尚硅谷四】Vue ---ajax---插槽slot

文章目录4.1,vue脚手架配置代理方法一方法二4.2,GitHub搜索案例入口main.jsApp.vueSearch.vueList.vue4.3,slot插槽4.3.1,默认插槽---slot4.3.2,具名插槽---slot name='xx'4.3.3,作用域插槽(插槽传递数据给使用者)4.3.4,总结4.1,vue脚手架配置代理方法一在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000"}说明：优点
复制链接

扫一扫

专栏目录