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

文章目录

4.1,vue脚手架配置代理
- 方法一
- 方法二
4.2,GitHub搜索案例
- 入口main.js
- App.vue
- Search.vue
- List.vue
4.3,slot插槽
- 4.3.1,默认插槽---slot
- 4.3.2,具名插槽---slot name='xx'
- 4.3.3,作用域插槽(插槽传递数据给使用者)
- 4.3.4,总结

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:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080changeOrigin默认值为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-namesname: "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-namesname: "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-namesname:'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>

【Vue2-尚硅谷四】Vue ---ajax---插槽slot相关推荐

Vue的插槽slot的理解
Vue中插槽slot的理解 1.什么是插槽 2.插槽分类单个插槽具名插槽作用域插槽 3.版本升级后 v-slot的用法默认插槽还是使用,没有变化具名插槽作用域插槽本文将从之前的slot. ...
【尚硅谷】Vue.js从入门到精通笔记
目录第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...
Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
Vue在插槽slot时报错：Component template should contain exactly one root element. If you are using v-ifen
Component template should contain exactly one root element. If you are using v-if on multiple elemen ...
Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...
vue的插槽slot
插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容 sl ...
尚硅谷课程vue学习（一）
目录 data两种写法 el两种写法由vue管理的函数,一定不要写箭头函数,不然this指向windows实例了 MVVM模型 defineProperty属性数据代理 v-on: v-bind: ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
尚硅谷Vue技术全家桶（1）
尚硅谷Vue技术全家桶课程来源于b站尚硅谷教程:一套搞定Vue技术全家桶,轻松拿捏vue3.0(vue.js全网最新) 课程简介在这个vue2到vue3的过渡时期,需要兼顾2.x和3版本.尚硅谷的 ...
尚硅谷全套课件整理：Java、前端、大数据、安卓、面试题
目录 Java 尚硅谷 IT 精英计划 JavaSE 内部学习笔记.pdf 尚硅谷 Java 基础实战之银行项目.pdf 尚硅谷 Java 技术之 JDBC.pdf 尚硅谷 Java 技术之 Java ...

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

文章目录

4.1,vue脚手架配置代理

方法一

方法二

4.2,GitHub搜索案例

入口main.js

App.vue

Search.vue

List.vue

4.3,slot插槽

4.3.1,默认插槽—slot

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

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

4.3.4,总结

【Vue2-尚硅谷四】Vue ---ajax---插槽slot相关推荐

最新文章

热门文章