一.我们一般用动态组件来干什么？
1.多个组件使用同一个挂载点，并动态切换，这就是动态组件
2.语法:
<component :is="变量"></component>变量一般关联着要显示的组件，
3. <keep-alive> </keep-alive> 的作用
在做动态切换的时候进行缓存，减轻浏览器的压力,不加的时候在页面中来回创建和销毁。
当加了<keep-alive> </keep-alive>的时候
组件会被缓存起来不会进行销毁
4.activated ,deactivate钩子函数的作用
activated – 激活时触发
deactivated – 失去激活状态触发
在切换组件的时候，会循环使用这两个钩子函数，可在这两个函数里面挂载一些方法；
二.插槽语法
1.作用:用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
2.总共分为三大类
默认插槽
具名插槽
作用域插槽
3.默认插槽的使用
（1） 在子组件中通过 <slot></slot> 来接收
(2) 在父组件里面自定义标签内 输入内容
（3） 如果自定义标签内没有内容，默认显示插槽里面的内容（也就是<slot>内容</slot>）
（4）如果里面有两个 <slot></slot> 来接收 则在自定义标签内的内容都会放入该<slot></slot>内。
4.具名插槽的使用
（1） 具名 也就是有名字，有名字的好处是什么呢？我们来先说下没有名字的情况 ，如果没用名字，请看下面代码：
子组件:
<template>
<div class>
<h1>
<slot></slot>
<slot></slot>
<slot></slot>
</h1>
</div>
</template>
<script>
export default {
name: "",
methods: {}
};
</script>
<style scoped>
</style>
父组件:
<template>
<div class>
<a1>
66
</a1>
</div>
</template>
<script>
import a1 from "../a1.vue";
export default {
components: {
a1
},
name: "",
methods: {}
};
</script>
<style scoped>
</style>
解析上面的代码：在自定义 <a1> 66</a1> 里面有数字，而对应的子组件有三个 <slot></slot>， 结果就是，在三个 <slot></slot>里面都是66，如果我像第一个 <slot></slot>显示55 第三个显示77，给对应的 <slot></slot>去上名字即可。
父组件:
<a1>
<template v-slot:title1>55</template>
</a1>
<a1>
<template v-slot:title2>66</template>
</a1>
<a1>
<template v-slot:title3>77</template>
</a1>子组件:
<slot name="title1"></slot>
<slot name="title2"></slot>
<slot name="title3"></slot>通过取上属性的名字name="值", 通过v-slot="名字后面的一个值 。
5.作用域插槽的使用
1.作用域插槽的用处:让父组件决定子组件里面的数据该应该如何显示
2. 传递的方式，使用属性绑定的方式将数据传递给父组件
3.在父组件要使用template标签，在标签里面，使用v-slot的属性,属性值可以任意绑定
属性值是一个对象，对象里面包含了子组件传递过来的数据。
4.应用场景：使用组件插槽技术时,需要用到子组件内变量
5.使用的小技巧:通过双括号进行打印
6.当默认插槽与作用域插槽一起使用时,需要给作用域插槽起个名字
代码演示:
App.vue文件
<template>
<div class="app">
<!-- 1.第一次按照字符串的形式进行显示 -->
<MyTable :arr="list"></MyTable>>
<!-- 第二次点击跳转到图片 -->
<MyTable :arr="list">
<template v-slot="scope">
<a :href="scope.data.headImgUrl">图片</a>
</template>
</MyTable>>
<!-- 第三次动态绑定图片 -->
<MyTable :arr="list">
<template v-slot="scope">
<img :src="scope.data.headImgUrl" alt />
</template>
</MyTable>>
</div>
</template>
<script>
import MyTable from "../MyTable.vue";
export default {
data() {
return {
list: [
{
name: "小传同学",
age: 18,
headImgUrl:
"http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg"
},
{
name: "小黑同学",
age: 25,
headImgUrl:
"http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg"
},
{
name: "智慧同学",
age: 21,
headImgUrl:
"http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg"
}
]
};
},
name: "",
methods: {},
components: {
MyTable
}
};
</script>
<style scoped>
</style>
MyTable.vue
<template>
<div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>头像</th>
</tr>
</thead>
<tbody>
<tr v-for="(obj, index) in arr" :key="index">
<td>{
{ index + 1 }}</td>
<td>{
{ obj.name }}</td>
<td>{
{ obj.age }}</td>
<td>
<slot :data="obj">
<!-- 默认值给上,如果使用组件不自定义标签显示默认文字 -->
<!-- {
{ obj.headImgUrl}} -->
</slot>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
arr: Array
}
};
</script>解析:在显示地址栏的那一栏通过作用域插槽，分别以a链接跳转的方式，和img图片的形式，直接显示字符串的方式进行显示，通过
进行传递，在父组件里面进行接收，通过v-slot="变量"，这个变量可以是任意的，可以通过进行答应这个变量来进行一层一层的剖析出底层的数据。
二.自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 v-xxx
html+css的复用的主要形式是组件
2.注册的方式总分为两种，全局注册和局部注册
(1)全局注册在main.js里面进行注册,在所有的Vue文件里面都可以使用
例子:
Vue.directive("指令的名字", {
inserted(el) {
el:获取的是操作的那个DOM标签
}
})( 2 ) 局部注册
directives:{
"指令名字":{
inserted(el){
el拿到的是DOM中对应的标签
}
}
}( 3）配置项可以说inserted ，也可以是 bind
操作js用inserted，操作css使用bind
(4) 自定义命令传参
// 目标: 自定义指令传值
Vue.directive('color', {
inserted(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
})<p v-color="colorStr" @click="changeColor">修改文字颜色</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>通过binding拿到的是一个对象，binding.value来进行修改里面的值。