今日目标:
- 能够了解组件进阶知识
- 能够掌握自定义指令创建和使用
学习内容：
学习目录:
知识点自测
- 组件创建, 注册和使用 - 伸手就来特别熟练
- 指令的作用
1. 组件进阶
1.0 组件进阶 - 动态组件
目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件
- 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息
- 准备被切换的 - UserName.vue / UserInfo.vue 2个组件
#src/components/01/UserInfo.vue
<template>
<div>
<div>
<span>人生格言:</span>
<input type="text">
</div>
<div>
<span>个人简介:</span>
<textarea></textarea>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
#src/components/01/UserName.vue
<template>
<div>
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
- 引入到01_UseDynamic.vue注册
- 准备变量来承载要显示的"组件名"
- 设置挂载点, 使用is属性来设置要显示哪个组件
- 点击按钮 – 修改comName变量里的"组件名"
#src/views/01_UseDynamic.vue ,这里的vue放到views中而不是components中，只是为了方便大家查阅代码
<template>
<div>
<button @click="comName = 'UserName'">账号密码填写</button>
<button @click="comName = 'UserInfo'">个人信息填写</button>
<p>下面显示注册组件-动态切换:</p>
<div style="border: 1px solid red;">
//PS： 如果comName是UserName，则显示UserName组件，反之则显示UserInfo
<component :is="comName"></component>
</div>
</div>
</template>
<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名
import UserName from '../components/01/UserName'
import UserInfo from '../components/01/UserInfo'
export default {
data(){
return {
comName: "UserName"
}
},
components: {
UserName,
UserInfo
}
}
</script>
在App.vue - 引入01_UseDynamic.vue并使用显示
总结: vue内置component组件, 配合is属性, 设置要显示的组件名字
- 什么是动态组件?
- 在同一个挂载点, 可以切换显示不同组件
- 如何使用动态组件?
- vue内置的component组件, 配合is属性
- 如何切换?
- 改变is属性的值, 为要显示的组件名即可
1.1 组件进阶 - 组件缓存
目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高
- 使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁
- 演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程
- 演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁
- 语法:Vue内置的keep-alive组件 包起来要频繁切换的组件
<keep-alive> // keep-alive：保持-活着
<component :is="xxx"></component>
</keep-alive>
- 具体操作：
- 01复制一份改为02
- 复制01_UseDynamic.vue改为02_UseDynamic.vue
- 我们先来演示1的操作：
- 02/UserName.vue代码修改
<template>
<div>
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
</div>
</template>
<script>
export default {
created(){
console.log("02-UserName-创建");
},
destroyed(){
console.log("02-UserName-销毁");
},
}
</script>
<style>
</style>
02_UseDynamic.vue
<template>
<div>
<button @click="comName = 'UserName'">账号密码填写</button>
<button @click="comName = 'UserInfo'">个人信息填写</button>
<p>下面显示注册组件-动态切换:</p>
<div style="border: 1px solid red;">
<component :is="comName"></component>
</div>
</div>
</template>
<script>
//修改引入的vue
import UserName from '../components/02/UserName'
import UserInfo from '../components/02/UserInfo'
export default {
data(){
return {
comName: "UserName"
}
},
components: {
UserName,
UserInfo
}
}
</script>
<style>
</style>
- 接下来开始演示2：
- 02_UseDynamic.vue增加keep-alive
<!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法
- 如何进行组件缓存?
- vue内置的keep-alive组件把要缓存的组件包起来
- 组件缓存好处?
- 不会频繁的创建和销毁组件, 页面更快呈现
1.2 组件进阶 - 激活和非激活
目标: 被缓存的组件不再创建和销毁, 而是激活和非激活
- 补充2个钩子方法名:
- activated – 激活时触发
- deactivated – 失去激活状态触发
- UserName.vue增加俩新的生命周期
// 组件缓存下 - 多了2个钩子函数
activated(){
console.log("02-UserName-激活");
},
deactivated(){
console.log("02-UserName-失去激活");
}
如何知道缓存的组件是出现还是消失了?
- activated – 获得激活状态
- deactivated – 失去激活状态
1.3 组件进阶 - 组件插槽
目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
- 问题1：组件中的数据不确定可以怎么做？
- 通过props，接收父向子传递的变量
- 问题2：那组件中的标签不确定怎么办？
- 通过slot标签，组件插槽来实现
- slot：狭槽，水沟，理解为插槽
- vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽
- 如果想更换图片，那么将一个img标签插入，
- 那么再像更换，那么插入另一个img标签即可
需求: 以前折叠面板案例, 想要实现不同内容显示, 我们把折叠面板里的Pannel组件, 添加组件插槽方式
-
但是上边这个案例，我们在第一次使用这个pannel的时候，内容区域（红色部分）想要显示图片和文字
-
第二次使用的时候，内容区域想要显示四个p
-
那么此时，我们在pannel能固定写使用那些标签么？
-
是不可以的，可以通过slot插槽，动态传递标签过去
-
语法口诀:
- 组件内用
<slot></slot>占位 （在不确定使用什么标签的位置，使用slot占位） - 使用组件时
<Pannel></Pannel>包裹的内容, 传入标签替换slot
- 组件内用
-
具体操作：
-
03/Pannel.vue - 组件(直接复制)
<template>
<div>
<!-- 按钮标题 -->
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow = !isShow">
{{ isShow ? "收起" : "展开" }}
</span>
</div>
<!-- 下拉内容 , 这里是不确定的，一会来修改-->
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问，</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
};
},
};
</script>
<style scoped>
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #ccc;
padding: 0 1em;
}
.btn {
/* 鼠标改成手的形状 */
cursor: pointer;
}
img {
width: 50%;
}
</style>
views/03_UseSlot.vue - 使用组件(直接复制)
<template>
<div id="container">
<div id="app">
<h3>案例：折叠面板</h3>
<Pannel></Pannel>
<Pannel></Pannel>
<Pannel></Pannel>
</div>
</div>
</template>
<script>
export default {
};
</script>
<style>
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
}
</style>
src/App.vue中使用
<h1>3. 组件-插槽</h1>
<UseSlot></UseSlot>
导入注册代码省略
views/03_UseSlot.vue - 组件插槽使用
<template>
<div id="container">
<div id="app">
<h3>案例：折叠面板</h3>
<Pannel>
<img src="../assets/mm.gif" alt="">
<span>我是内容</span>
</Pannel>
<Pannel>
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问，</p>
<p>一片冰心在玉壶。</p>
</Pannel>
</div>
</div>
</template>
<script>
import Pannel from "../components/03/Pannel";
export default {
components: {
Pannel,
},
};
</script>
- 第一次使用Pannel的时候，会将内部的img和span替换slot
- 第二次使用pannel的时候，会将四个p替换slot
总结: 组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签
- 当组件内某一部分标签不确定怎么办?
- 用插槽技术
- 插槽具体如何使用?
- 先在组件内用slot占位
- 使用组件时, 传入具体标签插入
- 插槽运行效果?
- 传入的标签会替换掉slot显示
1.4 组件进阶 - 插槽默认内容
目标: 如果外面不给传, 想给个默认显示内容
- 口诀: 内放置内容，作为默认显示内容
- 语法：
<slot>默认内容</slot>
- 不给组件传递标签，使用slot默认内容
- 给组件传递标签，则slot被整体替换掉
- 如何给插槽设置默认显示内容?
- slot标签内写好默认要显示内容
- 什么时候插槽默认内容会显示?
- 当使用组件并未给我们传入具体标签或内容时
1.5 组件进阶 - 具名插槽
目标: 当一个组件内有2处以上需要外部传入标签的地方
-
传入的标签可以分别派发给不同的slot位置
-
要求: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)
-
具体操作：
-
03复制一份，改名为04
-
03_UseSlot.vue复制一份，改为04_UseSlot.vue
-
App.vue注册04_UseSlot.vue名为UseSlot2，并使用
<h1>4. 组件-具名插槽</h1>
<UseSlot2></UseSlot2>
components/04/Pannel.vue - 留下具名slot
<template>
<div>
<div class="title">
//具名插槽1
<slot name="title"></slot>
<span class="btn" @click="isShow = !isShow">
{{ isShow ? "收起" : "展开" }}
</span>
</div>
<!-- 下拉内容 -->
<div class="container" v-show="isShow">
//具名插槽2
<slot name="content"></slot>
</div>
</div>
</template>
views/04_UseSlot.vue使用
<template>
<div id="container">
<div id="app">
<h3>案例：折叠面板</h3>
<Pannel>
//将具名插槽的标签放入template，然后给template添加属性: v-slot:插槽名
<template v-slot:title>
<h4>芙蓉楼送辛渐</h4>
</template>
<template v-slot:content>
<img src="../assets/mm.gif" alt="">
<span>我是内容</span>
</template>
</Pannel>
<Pannel>
<template #title>
<span style="color: red;">我是标题</span>
</template>
<template #content>
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问，</p>
<p>一片冰心在玉壶。</p>
</template>
</Pannel>
</div>
</div>
</template>
<script>
import Pannel from "../components/04/Pannel";
export default {
components: {
Pannel,
},
};
</script>
- v-slot可以简化成#使用
- v-bind可以省略成: v-on: 可以省略成@ 那么v-slot: 可以简化成#
总结: slot的name属性起插槽名, 使用组件时, template配合#插槽名传入具体标签
1.6 组件进阶 - 作用域插槽 ***重难点
目标: 子组件里值, 在给插槽赋值时在父组件环境下使用
-
问题：使用插槽时，如何使用组件内的变量？
- 使用作用域插槽
-
复习: 插槽内slot中显示默认内容
-
例子: 默认内容在子组件中, 但是父亲在给插槽传值, 想要改变插槽显示的默认内容
-
具体操作：
-
复制04改为05
-
复制04_UseSlot.vue改为05_UseSlot.vue
-
注册05_UseSlot.vue为UseSlot3，并使用
<h1>5. 组件-作用域插槽</h1>
<UseSlot3></UseSlot3>
运行，发现报错，说在05_UseSlot.vue中没有定义defaultObj
- 如何解决上边的问题呢？使用作用域插槽
- 口诀:
- 子组件, 在slot上绑定自定义属性和子组件内的值
- 使用组件, 用template和v-slot=“自定义变量名比如scope”
- scope变量名自动绑定slot上所有属性和值
- 具体操作：
- components/05/Pannel.vue - 定义组件, 和具名插槽, 给slot绑定属性和值
<template>
<div>
<!-- 按钮标题 -->
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow = !isShow">
{{ isShow ? "收起" : "展开" }}
</span>
</div>
<!-- 下拉内容 -->
<div class="container" v-show="isShow">
<slot :row="defaultObj">{{ defaultObj.defaultOne }}</slot>
</div>
</div>
</template>
<script>
// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象
export default {
data() {
return {
isShow: false,
defaultObj: {
defaultOne: "无名氏",
defaultTwo: "小传同学"
}
};
},
};
</script>
views/05_UseSlot.vue
<template>
<div id="container">
<div id="app">
<h3>案例：折叠面板</h3>
<Pannel>
<!-- 需求: 插槽时, 使用组件内变量 -->
<!-- scope变量: {row: defaultObj} -->
<template v-slot="scope">
<p>{{ scope.row.defaultTwo }}</p>
</template>
</Pannel>
</div>
</div>
</template>
<script>
import Pannel from "../components/05/Pannel";
export default {
components: {
Pannel,
},
};
</script>
总结: 组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值
- 作用域插槽什么时候使用?
- 使用组件插槽技术时, 需要用到子组件内变量
- 作用域插槽使用口诀?
- 子组件在slot身上添加属性和子组件的值
- 使用组件处template配合v-slot=“变量名”（收集slot身上的所有属性和值）
1.7 组件进阶 - 作用域插槽使用场景 ***
目标: 了解作用域插槽使用场景, 自定义组件内标签+内容
- 案例: 封装一个表格组件, 在表格组件内循环产生单元格
- 准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里
- 准备UseTable.vue – 准备数据传入给MyTable.vue使用
新建：components/06/MyTable.vue - 模板(直接复制)
<template>
<div>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>头像</th>
</tr>
</thead>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>
</div>
</template>
<script>
export default {
}
</script>
新建：views/06_UseTable.vue - 准备数据, 引入MyTable，并传递数据
<template>
<div>
<MyTable :arr="list"></MyTable>
</div>
</template>
<script>
import MyTable from "../components/06/MyTable";
export default {
components: {
MyTable,
},
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",
},
],
};
},
};
</script>
<style>
</style>
MyTable循环显示数据
<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>
{{ obj.headImgUrl }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
arr: Array
}
}
</script>
App.vue注册06_UseTable.vue 并使用
<h1>6. 作用域插槽-使用场景</h1>
<p>组件内标签可以随意定义和数据使用</p>
<UseTable></UseTable>
例子: 我想要给td内显示图片, 需要传入自定义的img标签
-
思路：
-
在MyTable.vue的td中准备占位, 但是外面需要把图片地址赋予给src属性,所以在slot上把obj数据绑定
-
具体操作：
-
components/06/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 :row="obj">
<!-- 默认值给上,如果使用组件不自定义标签显示默认文字 -->
{{ obj.headImgUrl}}
</slot>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
arr: Array
}
}
</script>
在UseTable使用MyTable的时候, template上v-slot绑定变量, 传入img组件设置图片地址
<template>
<div>
<MyTable :arr="list"></MyTable>
<MyTable :arr="list">
<!-- scope: {row: obj} -->
<template v-slot="scope">
<a :href="scope.row.headImgUrl">{{ scope.row.headImgUrl }}</a>
</template>
</MyTable>
<MyTable :arr="list">
<template v-slot="scope">
<img style="width: 100px;" :src="scope.row.headImgUrl" alt="">
</template>
</MyTable>
</div>
</template>
<script>
import MyTable from "../components/06/MyTable";
export default {
components: {
MyTable,
},
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",
},
],
};
},
};
</script>
<style>
</style>
总结: 插槽可以自定义标签, 作用域插槽可以把组件内的值取出来自定义内容
理解：
- 数据在子组件中，为啥要传递给父组件，然后再回传回来再用呢？
- 其实主要是因为子组件，如果直接显示数据，那用啥表情显示呢？用img？用a？写死了不好
- 所以由使用者（父组件），来确定这一块用哪个标签显示，只不过他没有数据，需要子组件传递过去
我们为什么要使用作用域插槽?
- 可以让组件更加灵活的适用于不同的场景和项目
2. 自定义指令
- 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令： v-xxx
- Vue提供的内置指令，无法满足咱们的需求，那么就可以自定义指令
- 自定义指令文档
2.0 自定义指令-注册
- 局部注册：新建views/07_UseDirective.vue
<template>
<div>
<!-- <input type="text" v-gfocus> 这个是全局的指令 -->
<input type="text" v-focus>
</div>
</template>
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v-指令名
export default {
data(){
return {
colorStr: 'red'
}
},
directives: {
focus: {
inserted(el){//el：代表使用当前指令的元素对象
el.focus()
}
}
}
}
</script>
<style>
</style>
全局注册：在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令
// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
inserted(el) {
el.focus() // 触发标签的事件方法
}
})
总结: 全局注册自定义指令, 哪里都能用, 局部注册, 只能在当前vue文件里用
我们为什么要自定义指令?
- 在Vue内置指令满足不了需求时, 可以自己定义使用
2.1 自定义指令-传值
目标: 使用自定义指令, 传入一个值
- 需求: 定义color指令-传入一个颜色, 给标签设置文字颜色
- main.js定义处修改一下
// 目标: 自定义指令传值
Vue.directive('color', {
inserted(el, binding) { //binding里边存储了指令的很多信息，binding.value存储的是指令传递过来的数据，比如下边的colorStr变量
el.style.color = binding.value
},
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
update(el, binding) { //数据更新时，执行此方法（如果不写这个方法，那么colorStr变量改变值，颜色不会发生改变）
el.style.color = binding.value
}
})
07_UseDirective.vue处更改一下
<p v-color="colorStr" @click="changeColor">修改文字颜色</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>
总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作
- 指令如何传值?
- v-指令名=“值”
- 指令值变化触发什么方法?
- 自定义指令的update方法而非inserted方法
今日总结
- 动态组件的使用步骤
- 组件缓存使用步骤和作用
- 组件插槽默认使用
- 插槽默认显示的内容
- 多个插槽时, 具名插槽如何使用
- 作用域插槽如何使用以及目的
- 自定义命令如何使用
面试题
1. vue中solt的使用方式，以及solt作用域插槽的用法
使用方式：当组件当做标签进行使用的时候，用slot可以用来接受组件标签包裹的内容，当给solt标签添加name属性的 时候，可以调换响应的位置
(高级用法) 插槽作用域： 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
// current-user组件, user属性和值, 绑定给slotProps上
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
扩展阅读: https://cn.vuejs.org/v2/guide/components-slots.html (了解即可, 一般用不上)
2. 跟keep-alive有关的生命周期是哪些？（必会）
1**）前言：**在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染
2**）生命周期函数：**在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。
1**、activated钩子：**在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
2**、Activated钩子调用时机：** 第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发
1**、deactivated钩子：**组件被停用（离开路由）时调用。
2**、deactivated钩子调用时机**：使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了，这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
3. 自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必会）
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数：el、binding
4. is这个特性你有用过吗？主要用在哪些方面？（高薪常问）
1**）动态组件**
<component :is="componentName"></component>， componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。
2**）is的用法**
有些HTML元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。
而有些HTML元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
<ul>
<card-list></card-list>
</ul>
所以上面<card-list></card-list>会被作为无效的内容提升到外部，并导致最终渲染结果出错。应该这么写：
<ul>
<li is="cardList"></li>
</ul>
附加练习_1.注册组件复用
目的: 封装一个复用的组件, 可以动态的插入标签, 来作为注册页的一块项
<div id="app">
<child-com :title="'姓名'">
<input type='text'/>
</child-com>
<child-com :title="'密码'">
<input type='password' />
</child-com>
<child-com :title="'性别'">
<input type='radio' name="sex" value="男"/>男
<input type='radio' name="sex" value="女"/>女
</child-com>
<child-com :title="'爱好'">
<input type='checkbox' value="抽烟" />抽烟
<input type='checkbox' value="喝酒" />喝酒
<input type='checkbox' value="烫头" />烫头
</child-com>
<child-com :title="'来自于'">
<select>
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="南京">南京</option>
</select>
</child-com>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
components: {
childCom: { // 组件名字
props: {
title: {
type: String
}
},
template: `<div style="border: 1px solid black;">
<p>{{title}}</p>
<slot></slot>
</div>`
}
}
})
</script>
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
