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>