插槽和axios的封装

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

插槽 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);
           
        }
    }



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值