插槽 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 newaxios
2 把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);
}
}
本文详细介绍了Vue.js中的插槽概念、作用及分类,包括匿名插槽、后备插槽、具名插槽和作用域插槽,并提供了相关示例。同时,文章讲解了动态组件的使用、keep-alive的配合以及进入和离开组件的钩子函数。此外,还阐述了axios的局部安装、使用以及在组件生命周期中的最佳实践,最后详述了如何进行axios的封装,包括创建http目录、新建axios.js和配置api.js,以实现全局调用。
1187

被折叠的 条评论
为什么被折叠?



