插槽和axios的封装
插槽 slot
概念
我们可以将共性抽取到组件中，将不同暴露为一个插槽,一旦我们预留了插槽，则内容可以通过父组件的代码来控制，就可以根据我们得需求，决定插槽插入什么样的内容有了插槽后，我们可以向子组件标签中加入自定义内容，意味着子组件标签必须写双标签
<子组件标签>内容</子组件标签>
内容可以是数据、标签等一切内容作用：
1 减少vue子组件文本个数
2 增加了组件的扩展性
插槽的分类：
1 匿名的插槽
2 具名插槽（用得最多）
3 后备插槽
4 作用域插槽
1 匿名插槽
特点：子组件的插槽没有名字，父组件传递额参数能够进入到子组件中所有匿名插槽中
Father.vue
<Son>内容</Son>
Son.vue:
<slot></slot>
2 后备插槽
特点：如果父组件没有传递任何参数，则子组件可以默认一个值
Father.vue
<Son></Son>
Son.vue:
<slot>默认值</slot>
3 具名插槽
特点：父组件能够指定对应的内容插入子组件对应的插槽中
Father.vue
<Son><template v-slot:s1>值1</template></Son><Son><template v-slot:s2>值2</template></Son>
Son.vue
<slot name="s1"></slot><slot name="s2"></slot>
简写：
Father.vue
<Son><template #s1>值1</template></Son><Son><template #s2>值2</template></Son>
练习
已知：
父组件:<Son><template #s>值1</template></Son><Son></Son>子组件:<slot name="s">默认值</slot>
父组件：
子组件：
4 作用域插槽
特点：值有子组件提供，节点/布局由父组件提供，作用域插槽就是，子组件需要把数据传递给父组件，父组件拿到数据做渲染，最终把结果插入给子组件
4.1 匿名：
Father.vue
<template><div><h1>Father</h1><hr><Son v-slot="obj"><table border="1"><tr><td>编号</td><td>姓名</td></tr><tr v-for="item in obj.arr" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td></tr></table></Son></div>
</template><script>
import Son from './Son.vue'
export default {components:{Son},
}
</script>Son.vue:
<template><div><h2>Son</h2><slot :arr="arr"></slot></div>
</template><script>
export default {data(){return{arr:[{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}]}}
};
</script><style>
</style>
4.2 具名插槽
Son.vue:
<template><div><h2>Son</h2><slot name="s" :arr="arr"></slot></div>
</template><script>
export default {data(){return{arr:[{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}]}}
};
</script><style>
</style>
Father.vue
<template><div><h1>Father</h1><hr><Son ><template v-slot:s="obj"><table border="1"><tr><td>编号</td><td>姓名</td></tr><tr v-for="item in obj.arr" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td></tr></table></template></Son><!-- <Son><template #s1>值1</template></Son><Son><template #s2>值2</template></Son> --></div>
</template><script>
import Son from './Son.vue'
export default {components:{Son},
}
</script><style></style>
简写：Father.vue
<Son><template #s="obj">
动态组件
概念：组件能够相互切换
语法：
<component :is="注册的组件名"></component>
Demo:
<template><div><button @click="current='TabA'">tabA</button><button @click="current='TabB'">tabB</button><button @click="current='TabC'">tabC</button><hr><component :is="current"></component></div>
</template><script>
import TabA from './TabA.vue'
import TabB from './TabB.vue'
import TabC from './TabC.vue'
export default {components:{TabA,TabB,TabC},data(){return{current:"TabA"}}
};
</script><style>
</style>
特点：
当我们切换组件时，组件会销毁，也就是会执行destroyed钩子函数，因此，可以利用该1钩子函数实现清空定时器等操作，节约内存<script>
let timer;
export default {created(){timer=setInterval(()=>{console.log("a");},1000)},destroyed(){console.log("A销毁");clearInterval(timer)}
}
</script>
keep-alive（经常搭配动态组件）
被该标签包裹的组件不会销毁，能够缓存数据<keep-alive include/exclude="TabA,TabB"><component :is="current"></component></keep-alive>include : 包含 ---》指定的组件会被缓存exclude ： 排除 ---》指定的组件不会被缓存也支持正则： <keep-alive :include="/T/">
进入组件和离开组件的钩子函数
前置：必须被keep-alive缓存时才会生效
//进入组件activated(){console.log("进入组件");},//离开组件deactivated() {console.log("离开进入组件");},
axios
概念
基于promise实现 对ajax的一种封装
局部安装
npm i axios
使用
import axios from 'axios'get提交：let res= await axios({url:'',method:"get",params:{username:"x1",......}})get提交的简写: let res=await axios.get('地址',{params:{...}})post提交:let res= await axios({url:'',method:"post",data:{username:"x1",......}})post提交的简写: let res=await axios.post("地址",{....})面试题：vue中发送ajax是写在created中还是mounted中
答：我选择created
原因：
mounted：页面都挂载完毕后再发送请求，再次拿到数据更改data，最终又渲染了一次----》二次渲染，可能会看到闪屏现象
created:生命周期早于mounted，早点发请求更快处理
关于axios的配置
import axios from 'axios'let newaxios=axios.create({//前缀路径baseURL:"http://localhost:3000",//如果超时则报错 单位毫秒timeout:3000
})let res=await newaxios({url:"/xxxxx",......
})
封装axios
步骤1： 把axios对象封装到一个js文件中，然后暴露出去，在main.js中引入并且挂载到全局，将来可以直接在任意组件中通过this.执行
1 src下新建http目录，该目录下新建 axios.js,编辑该js
import axios from 'axios'let newaxios=axios.create({// 前缀路径baseURL:"http://localhost:3000",timeout:3000
})//暴露
export default newaxios2 把newaxios挂载到全局, 找到main.js.并且编辑
//引入Vue构造器
import Vue from 'vue'
//引入入口组件
import App from './App.vue'//引入axios
import axios from './http/axios.js'//把asios挂载到vue全局中，放在new Vue的前面
Vue.prototype.$axios=axios//不会在控制台中出现有关生产模式的提示
Vue.config.productionTip = false//实例化一个vue对象（挂载入口vue）
new Vue({render: h => h(App),
})
//把入口vue挂载到index.html中id为app的div
.$mount('#app')步骤2：把组件中调用ajax的一套代码封装进js在去，以后只需要在组件中通过this.方法就能够调用ajax
1 http目录中新建modules目录，该目录就是用来分别装不同的模块.js(比如users.js),编辑该js文件
//引入自己的axios
import axios from '../axios.js'//登录
function login(params){return axios({url:"/users/login",method:"get",params})
}//注册
function register(data){return axios({url:"/users/register",method:"post",data})
}export default{login,register
}2 在http目录下新建api.js，由于以后有很多模块，因此该js就是用来合并多个模块的，能够使得最终只需要在main.js中全局挂载api这一个js即可 ，编辑api.js
import stus from './modules/stus.js'
import users from './modules/users.js'export default {stus,users
}
3 全局挂载api.js ,编辑main.js
//引入Vue构造器
import Vue from 'vue'
//引入入口组件
import App from './App.vue'//引入axios
// import axios from './http/axios.js'
//引入api
import api from './http/api.js'//把asios挂载到vue全局中
Vue.prototype.api=api
// Vue.prototype.$axios=axios//不会在控制台中出现有关生产模式的提示
Vue.config.productionTip = false//实例化一个vue对象（挂载入口vue）
new Vue({render: h => h(App),
})
//把入口vue挂载到index.html中id为app的div
.$mount('#app')使用：以注册为例：
methods:{//注册async register(){let res=await this.api.users.register(this.user)console.log(res);}}
插槽和axios的封装相关推荐
- axios get 某个参数是数组怎么传_Vue 中 Axios 的封装和 API 接口的管理
我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios ...
- vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
- 在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
- axios封装_VUE.JS请求工具Axios的封装
接触vue已经很长时间,也经常使用axios,但是原生封装的方法都很难满足日程开发的需求,所以这期就写一下axios的封装. 作者:陈宝玉啊 转发链接:https://www.jianshu.com/ ...
- 拦截器读post参数导致接口post请求报错_vue中Axios的封装和API接口的管理
一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响 ...
- $.post请求的参数在后台代码中得到为null_vue中Axios的封装和API接口的管理
来源:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axio ...
- axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
- router中获取vuex_Vue 中 Axios 的封装和 API 接口的管理
(给JavaScript加星标,提升前端技能) 作者:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U ...
- Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言 才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
最新文章
- 工厂用抽象类比接口_用简单的现实类比解释硬编码概念
- css3媒体查询实现网站响应式布局
- 用Python批量实现多Excel多Sheet合并的4种方法
- 一个小小的String问题引发的血案
- 轩逸车联网功能怎么用_手机上面的NFC功能怎么用的
- hutool的定时任务不支持依赖注入怎么办_设计一个任务调度算法，时间轮算法，比优先队列更高效...
- 织梦怎样调取mysql_如何实现dedecms外部数据库调用
- html读取json换行无效,前端Json换行显示
- Baxter实战 （二）ubuntu14.04安装Baxter Workstation
- 换电脑了,呵呵双核的 ADM 64 Dual Core 3600+
- asp数组函数LBound 、UBound和Split
- AUTOCAD2012安装失败解决方法
- Android-0. Android studio在导航栏增加自己的功能图标（如小扳手）
- 4. JSON字符串是如何被解析的？JsonParser了解一下
- 性能分析-云盘-sysbench IO测速脚本
- 【MySQL】6.0 表的增删查改
- 2021年域名投资低迷，如何看待10年后的域名及域名前景？
- Minio 图片永久访问的问题处理
- CSS 指层叠样式表 (Cascading Style Sheets) 和选择器
- arm linux 指纹识别,基于ARM—Linux指纹识别系统的设计.pdf
热门文章
- raid卡直通模式会走缓存吗_磁盘阵列 RAID 技术如何保护数据
- 4804: 欧拉心算
- 分享111个HTML医疗保健模板，总有一款适合您
- php mysql 白屏_PHP出现空白页面与无法载入mysql
- Model Adaption: Unsupervised Domain Adaption Without Source Data
- 小白的proxmox ve（pve）打造AIO（all in boom）折腾日记 （二）装机篇（爱国者m2装机不完全教程）
- js 中的 this、that
- 如何在Python中调用C++程序？（文中以Opencv为例，在Python中调用C++的Opencv）
- mysql怎么限制输入男女_excel表格中如何限制只输入男女
- 成语——》让我留在你身边