动态组件 & 插槽 & 自定义指令 & eslint & axios
一、动态组件
目的:实现组件显示和隐藏的切换
1、component标签的基础用法
//内置的component相当于占位符,is属性的值表示渲染组件的名称
<component :is="comName"></component>
2、动态切换组件的显示与隐藏
<template>
<div>
<button @click="comName = 'Left'">显示左侧组件</button>
<button @click="comName = 'Right'">显示右侧组件</button>
<div>
<component :is="conName"></component>
</div>
</div>
</template>
<script>
import Left from "./Left.vue";
import Right from "./Right.vue";
export default {
name: "TestdemoTest",
data() {
return {
comName: "Left",
};
},
components:{
Left,
Right
}
};
</script>
3、keep-alive保持状态
目的:可以把内部的组件缓存,而不是销毁重新生成,保证了组件数据切换之后的数据不被重置
<keep-alive>
<component :is="conName"></component>
</keep-alive>
keep-alive的include和exclude属性
//include指定哪些组件需要被缓存,多个组件用逗号隔开
//exclude指定哪些组件不被缓存
//注意:include和exclude不可同时使用!
<keep-alive include="Left,Right">
<component :is="conName"></component>
</keep-alive>
<keep-alive exclude="Right">
<component :is="conName"></component>
</keep-alive>
4、组件注册名称 && 组件声明时name 的区别
//当提供了name属性值时,组件的名称就为定义的名称MyLeft
name:"MyLeft"
//如果没有定义name。组件名称则为注册时的组件名Left
components:{
Left
}
二、插槽
1、插槽的基本用法
目的:把组件中不确定的部分定义为插槽,方便后续使用组件时按需写入不同的内容
例如:
在Left.vue组件中写了 <slot></slot>
则在引用left组件时,
<Left>
<p>这里可以显示到插槽里</p>
</Left>
2、v-slot指令
<!-- vue官方规定,每个slot都有一个name
如果省略name,则默认为default ,默认组件提供的内容会渲染到名称为default的插槽中 -->
<slot name="default"></slot>
如果要把内容填充到指定的插槽中,必须加上template
<Left>
<template v-solt:default>
<p>这里的内容会渲染到名称为defalut的插槽内</p>
</template>
</Left>
v-slot的简写:#,例如
<template #default>
<p>这里的内容会渲染到名称为defalut的插槽内</p>
</template>
3、具名插槽
含义:有具体的名称的插槽
使用:
在组件中定义插槽
<template>
<div class="article-container">
<!-- 文章的标题 -->
<div class="header-box">
<slot name="title"></slot>
</div>
<!-- 文章的内容 -->
<div class="content-box">
<slot name="content"></slot>
</div>
<!-- 文章的作者 -->
<div class="footer-box">
<slot name="author"></slot>
</div>
</div>
</template>
<script>
export default {
name: "conArticle",
};
</script>
<style lang="less" scoped>
.article-container{
> div{
min-height: 150px;
}
.header-box{
background-color: lightblue;
}
.content-box{
background-color: lightcoral;
}
.footer-box{
background-color: lightseagreen;
}
}
</style>
在使用组件时,将对应内容填充到插槽里
<template>
<div>
<Article>
<template #title>
<h3>一首歌</h3>
</template>
<template #content>
<div>
<p>远处的山坡上有两头牛</p>
<p>公牛对母牛说</p>
<p>爱老虎油</p>
</div>
</template>
<template #author>
<p>作者:不知道是谁</p>
</template>
</Article>
</div>
</template>
<script>
import Article from "./Article.vue";
export default {
name: "TestdemoTest",
data() {
return {};
},
componets: {
Article,
},
};
</script>
<style scoped>
</style>
效果:
4、作用域插槽
在封装组件时,为预留的<slot>提供属性对应的值,这种用法就叫做“作用域插槽”
<div class="header-box">
<slot name="title" msg="Hello today!"></slot>
</div>
<template #title="obj">
<h3>一首歌</h3>
<p>{{ obj.msg }}</p>
</template>
作用域插槽的解构赋值
<div class="header-box">
<slot name="title" msg="hello vue.js" :user="userinfo"></slot>
</div>
<script>
export default {
name: "TestdemoTest",
data() {
return {
userinfo:{
name:'zs',
age:12
}
};
},
};
</script>
<template #title="{msg, user}">
<h3>一首歌</h3>
<p>{{ msg }}</p>
<p>{{ user.name }}</p>
</template>
三、自定义指令
1、私有自定义指令
<h3 v-color>一首歌</h3>
//私有自定义指令节点
directives:{
//定义名为color的指令,指向一个对象
color:{
bind(el){
console.log("触发可bind函数")
el.style.color ='red'
}
}
}
2、update函数
<h3 v-color="'red'">一首歌</h3>
<button @click="color = 'green'"></button>
//私有自定义指令节点
directives: {
//定义名为color的指令,指向一个对象
color: {
//在dom更新时,会触发update函数
update(el, binding) {
el.style.color = binding.value;
},
},
//当bind和update的内容相同,可简写为
color(el,binding){
el.style.color = binding.value;
}
},
3、全局自定义指令(在main.js中定义)
Vue.directive('color',function(el,bingding){
el.style.color = bingding.value
})
四、eslint
1、eslint的作用
约束代码风格,例如代码缩进为2之类的
eslint官网2 具体常用规则可在官网中查看,命令对应的规则
五、axios
1、axios的基本语法及常见问题
复习一下axios的用法,get和post
<template>
<div class="left-box">
<h3>Left 组件</h3>
<button @click="getInfo">发起get请求</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'comLeft',
methods: {
async getInfo(){
const {data:res} = await axios.get('http://www.liulongbin.top:3006/api/get')
console.log(res)
}
},
};
</script>
<template>
<div class="right-box">
<h3>Right 组件</h3>
<button @click="postInfo">发起post请求</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "comRight",
methods: {
async postInfo() {
const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: "zs", age: 20 });
console.log(res);
},
},
};
</script>
2、直接把axios挂到vue原型上并配置请求根路径
由于每个组件实例单独写请求代码太冗余,可以将axios的配置抽离,写到main.js中,再供vue实例使用。
main.js中配置
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false
//全局配置axios的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
//把axios挂载到prototype上,供每个。vue组件的实例使用
Vue.prototype.$http = axios;
new Vue({
render: h => h(App),
}).$mount('#app')
上述配置了$http,我们可在组件中具体使用了
<script>
// import axios from 'axios'
export default {
name:'comLeft',
methods: {
async getInfo(){
const {data:res} = await this.$http.get('/api/get')
console.log(res)
}
},
};
export default {
name: "comRight",
methods: {
async postInfo() {
const { data: res } = await this.$http.post('/api/post', { name: "zs", age: 20 });
console.log(res);
},
},
};
</script>
但这样无法实现api接口的复用
本文借鉴b站课程而记录黑马程序员vue前端基础