1.组件进阶 - 动态组件
-
准备被切换的 - UserName.vue / UserInfo.vue 2个组件
-
引入到UseDynamic.vue注册
-
准备变量来承载要显示的"组件名"
-
设置挂载点<component>, 使用is属性来设置要显示哪个组件
-
点击按钮 – 修改comName变量里的"组件名"
2.组件进阶 - 组件缓存
<div style="border: 1px solid red;"><!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 --><keep-alive><component :is="comName"></component></keep-alive> </div>
补充生命周期:
-
activated - 激活
-
deactivated - 失去激活状态
3.组件进阶 - 组件插槽
语法口诀:
-
组件内用<slot></slot>占位
-
使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot
口诀: <slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示
<slot>默认内容</slot>
4.组件进阶 - 具名插槽
<template><div><!-- 按钮标题 --><div class="title"><slot name="title"></slot><span class="btn" @click="isShow = !isShow">{
{ isShow ? "收起" : "展开" }}</span></div><!-- 下拉内容 --><div class="container" v-show="isShow"><slot name="content"></slot></div></div>
</template>
<template><div id="container"><div id="app"><h3>案例：折叠面板</h3><Pannel><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>
5.组件进阶 - 作用域插槽
口诀:
-
子组件, 在slot上绑定属性和子组件内的值
-
使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"
-
scope变量名自动绑定slot上所有属性和值
6.组件进阶 - 作用域插槽使用场景
案例: 封装一个表格组件, 在表格组件内循环产生单元格
准备MyTable.vue组件 – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里
准备UseTable.vue – 准备数据传入给MyTable.vue使用
7.自定义指令-注册/传值
注册：
<template><div><!-- <input type="text" v-gfocus> --><input type="text" v-focus></div>
</template>
?
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {data(){return {colorStr: 'red'}},directives: {focus: {inserted(el){el.focus()}}}
}
</script>
?
<style>
?
</style>