一、动态组件
1、介绍
动态组件指的是动态切换组件的显示与隐藏。
2、实现动态组件的渲染
Vue提供了一个内置的组件，专门用来实现动态组件的渲染。
3、动态渲染相关代码
3.1 APP.vue
<template>
<div id="app">
<h1>App组件</h1>
<hr />
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<div class="box">
<!--渲染Left组件和Right组件-->
<!--1. component 标签是vue内置的，作用：组件的占位符-->
<!--2. is属性的值，表示要渲染的组件的名字-->
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
data() {
return {
// comName表示要展示的组件的名字
comName: "Left",
};
},
components: {
Left,
Right,
},
};
</script>
<style lang="less">
</style>
3.2 Left.vue
<template>
<div class="left-container">
<h1>Left组件---{
{ count }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
created() {
console.log("Left组件被创建了！");
},
destroyed() {
console.log("Left组件被销毁了");
},
// 当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期
// 但是当组件被激活的时候，只会触发activated生命周期，不再触发created。因为组件没有被重新创建。
activated() {
console.log("组件被激活了,activated");
},
deactivated() {
console.log("组件被缓存了，deactivated");
},
};
</script>
<style lang="less" scoped>
.left-container {
width: 100%;
min-height: 250px;
background-color: orange;
text-align: center;
}
</style>
3.3 Right.vue
<template>
<div class="right-container">
<h1>Right组件---{
{ }}</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.right-container{
width: 100%;
min-height: 250px;
background-color: rgb(0, 162, 255);
text-align: center;
}
</style>
4、keep-alive保持状态
4.1 介绍
vue可以使用keep-alive来保持组件切换时的状态，也就是在切换的时候，该组件不会被销毁，而是处于未激活状态，保持原本状态，直到重新激活。
4.2 生命周期函数
当组件被缓存时，会自动触发组件的deactivated生命周期函数。
当组件被激活时，会自动触发组件的activated生命周期函数
4.3 相关代码
4.3.1 模板
<!-- keep-alive可以把内部的组件进行缓存，而不是销毁组件-->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
4.3.2 APP.vue
<template>
<div id="app">
<h1>App组件</h1>
<hr />
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<div class="box">
<!--渲染Left组件和Right组件-->
<!--1. component 标签是vue内置的，作用：组件的占位符-->
<!--2. is属性的值，表示要渲染的组件的名字-->
<!--3. is属性的值，应该是组件在components节点下的注册名称-->
<!-- keep-alive可以把内部的组件进行缓存，而不是销毁组件-->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
data() {
return {
// comName表示要展示的组件的名字
comName: "Left",
};
},
components: {
Left,
Right,
},
};
</script>
<style lang="less">
</style>
4.4 include属性和exclude属性
（1）include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔。
（2）exclude属性用来排除：通过exclude属性指定哪些组件不需要被缓存。
注意：不需要同时使用include和exclude这两个属性
<keep-alive include="Left,Right">
<component :is="comName"></component>
</keep-alive>
5、注册名称和组件声明时，name的用法
5.1 介绍
当提供了name属性之后，组件的名称，就是name属性的值。
（1）组件的“注册名称”的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构中。
（2）组件声明时候的“name”名称的主要应用场景：结合标签实现组件的缓存功能；以及在调试工具中看到组件的name名称。
5.2 相关代码
5.2.1 Right.vue
<template>
<div class="right-container">
<h1>Right组件---{
{}}</h1>
</div>
</template>
<script>
export default {
// 当提供了name属性之后，组件的名称，就是name属性的值
// 对比：
// 1.组件的“注册1名称”的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构中。
// 2.组件声明时候的“name”名称的主要应用场景：结合<keep-alive>标签实现组件的缓存功能；以及在调试工具中看到组件的name名称。
name: "MyRight",
};
</script>
<style lang="less" scoped>
.right-container {
width: 100%;
min-height: 250px;
background-color: rgb(0, 162, 255);
text-align: center;
}
</style>
二、插槽
1、介绍
插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽。
2、v-slot（简写为：#）
默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中。
如果要把内容填充到指定名称的插槽中，需要使用v-slot:这个指令。
v-slot后面要跟上插槽的名字。同时v-slot指令不能直接用在元素身上，必须用在template标签上。template这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是不会渲染为任何实质性的html元素。
v-slot指令的简写形式是 #
3、相关基础代码
3.1 App.vue
<template>
<div id="app">
<h1>App组件</h1>
<hr />
<div class="box">
<Left>
<!--默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中-->
<!--1.如果要把内容填充到指定名称的插槽中，需要使用v-slot:这个指令-->
<!--2.v-slot:后面要跟上插槽的名字-->
<!--3.v-slot:指令不能直接用在元素身上，必须用在template标签上-->
<!--4.template这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是不会渲染为任何实质性的html元素-->
<!--5.v-slot指令的简写形式是 #-->
<template v-slot:default>
<p>这是在Left组件的内容区域,声明的p标签</p>
</template>
</Left>
</div>
</div>
</template>
<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
components: {
// 如果在"声明组件"的时候，没有为组件指定name名称，则组件的名称默认就是“注册时候的名称”
Left,
Right,
},
};
</script>
<style lang="less">
</style>
3.2 Left.vue
<template>
<div class="left-container">
<h1>Left组件</h1>
<hr/>
<!--声明一个插槽区域-->
<!--vue官方规定：每一个slot插槽，都要有一个name名称-->
<!--如果省略了slot的name属性。则有一个默认名称叫做default-->
<slot name="default"></slot>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.left-container {
width: 100%;
min-height: 250px;
background-color: orange;
text-align: center;
}
</style>
4、具名插槽
4.1 介绍
插槽有具体的名字，如果有多个插槽，则要为每个插槽取具体的名字。
4.2 相关代码
4.2.1 APP.vue
<template>
<div id="app">
<h1>App组件</h1>
<hr />
<Article>
<template v-slot:title>
<h3>一首诗</h3>
</template>
<template #content>
<div>
<p>内容区域</p>
</div>
</template>
<template #author>
<div>
<p>作者</p>
</div>
</template>
</Article>
<hr/>
</div>
</template>
<script>
import Article from "@/components/Article.vue";
export default {
components: {
// 如果在"声明组件"的时候，没有为组件指定name名称，则组件的名称默认就是“注册时候的名称
Article
},
};
</script>
<style lang="less">
</style>
4.2.2 Article.vue
<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: 'Article'
}
</script>
<style lang="less" scoped>
.article-container{
> div{
min-height: 150px;
}
.header-box{
background-color:pink;
}
.content-box{
background-color:lightblue;
}
.footer-box{
background-color:lightsalmon;
}
}
</style>
5、作用域插槽
5.1 介绍
在封装组件时，为预留的提供属性对应的值，这种用法，叫做“作用域插槽”。（scope）
<template #content="scope">
<div>
<p>内容区域</p>
<p>{
{ scope.msg }}</p>
</div>
</template>
5.2 相关代码
5.2.1 APP.vue
<template>
<div id="app">
<h1>App组件</h1>
<hr />
<Article>
<template #content="scope">
<div>
<p>内容区域</p>
<p>{
{ scope.msg }}</p>
</div>
</template>
</Article>
<hr/>
</div>
</template>
<script>
import Article from "@/components/Article.vue";
export default {
components: {
Article
},
};
</script>
<style lang="less">
</style>
5.2.2 Article.vue
<template>
<div class="article-container">
<div class="content-box">
<!--在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做“作用域插槽”-->
<slot name="content" msg="hello world"></slot>
</div>
</div>
</template>
<script>
export default {
// 首字母大写
name: 'Article'
}
</script>
<style lang="less" scoped>
.article-container{
> div{
min-height: 150px;
}
.content-box{
background-color:lightblue;
}
}
</style>
5.3 作用域插槽的解构赋值
5.3.1 介绍
可以将属性值动态绑定
5.3.2 相关代码（APP.vue）
<template>
<div id="app">
<h1>App组件</h1>
<hr />
<Article>
<template #content="scope">
<div>
<p>内容区域</p>
<p>{
{ scope.msg }}</p>
<p>{
{ scope.user.name }}</p>
<p>{
{ scope.user.age }}</p>
</div>
</template>
</Article>
<hr/>
</div>
</template>
<script>
import Article from "@/components/Article.vue";
export default {
components: {
Article
},
};
</script>
<style lang="less">
</style>
5.3.3 Article.vue
<template>
<div class="article-container">
<div class="content-box">
<!--在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做“作用域插槽”-->
<slot name="content" msg="hello world" :user="userinfo"></slot>
</div>
</div>
</template>
<script>
export default {
// 首字母大写
name: 'Article',
data(){
return {
// 用户信息对象
userinfo:{
name:'zs',
age:18
}
}
}
}
</script>
<style lang="less" scoped>
.article-container{
> div{
min-height: 150px;
}
.content-box{
background-color:lightblue;
}
}
</style>
三、自定义指令
1、介绍
vue官方提供了v-text、v-for、v-model、v-if等常用指令。除此之外vue还允许开发者自定义指令。
2、自定义指令
2.1 私有自定义指令
在每个vue组件中，可以在directives节点下声明私有自定义指令。
2.1.1 私有自定义指令的基础用法
<template>
<div id="app">
<h1 v-color>App组件</h1>
<p v-color>测试</p>
<hr />
</div>
</template>
<script>
export default {
components: {
},
directives: {
// 定义名为color的指令，指向一个配置对象
color: {
// 当指令第一次被绑定到元素上的时候，会立即触发bind函数
// 形参中的el表示当前指令所绑定到的那个DOM对象
bind(el) {
console.log("触发了v-color的bind函数")
el.style.color = 'red'
},
},
},
};
</script>
<style lang="less">
</style>
结果
2.1.2 使用binding.value获取指令绑定的值
当指令第一次被绑定到元素上的时候，会立即触发bind函数
<template>
<div id="app">
<h1 v-color = "color">App组件</h1>
<p v-color = "'green'">测试</p>
<hr />
</div>
</template>
<script>
export default {
data(){
return {
color:'blue'
}
},
components: {
},
directives: {
// 定义名为color的指令，指向一个配置对象
color: {
// 当指令第一次被绑定到元素上的时候，会立即触发bind函数
// 形参中的el表示当前指令所绑定到的那个DOM对象
bind(el,binding) {
console.log("触发了v-color的bind函数")
el.style.color = binding.value
},
},
},
};
</script>
<style lang="less">
</style>
结果
2.1.3 使用update函数调用元素
update函数会在每次DOM更新时被调用
<template>
<div id="app">
<h1 v-color = "color">App组件</h1>
<p v-color = "'green'">测试</p>
<button @click="color='green'">改变color的颜色值</button>
<hr />
</div>
</template>
<script>
export default {
data(){
return {
color:'blue'
}
},
components: {
},
directives: {
// 定义名为color的指令，指向一个配置对象
color: {
// 在DOM更新的时候，会触发update函数
update(el, binding){
console.log("触发了v-color的update函数")
el.style.color = binding.value
}
},
},
};
</script>
<style lang="less">
</style>
结果
2.1.4 函数简写
<template>
<div id="app">
<h1 v-color = "color">App组件</h1>
<p v-color = "'green'">测试</p>
<button @click="color='green'">改变color的颜色值</button>
<hr/>
</div>
</template>
<script>
export default {
data(){
return {
color:'blue'
}
},
components: {
},
directives: {
// 定义名为color的指令，指向一个配置对象
color(el, binding){
el.style.color = binding.value
}
},
};
</script>
<style lang="less">
</style>
2.2 全局自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.directive('color',function(el, binding){
el.style.color = binding.value
})
new Vue({
render: h => h(App),
}).$mount('#app')