Vue组件进阶, 自定义指令, tabbar案例

Vue组件进阶

动态组件

多个组件使用同一个挂载点，并动态切换

1. 准备被切换的 - UserName.vue / UserInfo.vue 2个组件

2. 引入到UseDynamic.vue注册

3. 准备变量来承载要显示的"组件名"

4. 设置挂载点<component>, 使用is属性来设置要显示哪个组件

5. 点击按钮 – 修改comName变量里的"组件名"

 

什么是动态组件?

在同一个挂载点, 可以切换显示不同组件

如何使用动态组件?

vue内置的component组件, 配合is属性

如何切换?

改变is属性的值, 为要显示的组件名即可

组件缓存

 

如何进行组件缓存?

vue内置的keep-alive组件把要缓存的组件包起来

组件缓存好处?

不会频繁的创建和销毁组件, 页面更快呈现

 

组件激活和非激活

如何知道缓存的组件是出现还是消失了?

activated – 获得激活状态

deactivated – 失去激活状态

 

组件插槽

通过 slot 标签, 让组件内可以接收不同的标签结构显示

1. 组件内用<slot></slot>占位

2. 使用组件时<Pannel></Pannel>夹着的地方, 传入标签替换slot

 

当组件内某一部分标签不确定怎么办?

用插槽技术

插槽具体如何使用?

1. 先在组件内用slot占位

2. 使用组件时, 传入具体标签插入

插槽运行效果?

传入的标签会替换掉slot显示

插槽默认内容

如果外面不给传, 想给个默认显示内容

<slot>内放置内容, 作为默认显示内容

  效果:

  不给组件传标签. slot内容原地显示

给组件内传标签, 则slot整体被换掉

 

 

如何给插槽设置默认显示内容?

slot标签内写好默认要显示内容

什么时候插槽默认内容会显示?

当使用组件并未给我们传入具体标签或内容时

组件进阶 – 具名插槽

一个组件内有2处以上需要外部传入标签的地方

1. slot使用name属性区分名字

2. template配合v-slot:名字来分发对应标签

  v-slot:可以简化成#

 

组件内多处不确定的标签如何做?

slot占位, 给name属性起名字来区分

template配合v-slot:name分发要替换的标签

v-slot: 可以简化成什么?

#

 

作用域插槽

目标：使用插槽时, 想使用子组件内变量

1. 子组件, 在slot上绑定属性和子组件内的值

  2. 使用组件, 传入自定义标签, 用template和v-slot="自定义变量名"

  3. scope变量名自动绑定slot上所有属性和值

scope = {row: defaultObj}

 

 

作用域插槽什么时候使用?

使用组件插槽技术时, 需要用到子组件内变量

作用域插槽使用口诀?

子组件在slot身上添加属性和子组件的值

使用组件处template配合v-slot=“变量名”

收集slot身上的所有属性和值

我们为什么要使用作用域插槽?

可以让组件更加灵活的适用于不同的场景和项目

自定义指令

自定义指令_注册

获取标签, 扩展额外的功能

我们为什么要自定义指令?

在Vue内置指令满足不了需求时, 可以自己定义使用

自定义指令_传值

目标：定义color指令-传入一个颜色, 给标签设置文字颜色

 

 

指令如何传值?

v-指令名="值"

指令值变化触发什么方法?

自定义指令的update方法而非inserted方法

tabbar案例

所需文件

 

App.vue

---

main.js

 

 MyHeader.vue

 

 MyTabBar.js

 

 MyTable.js

 MyGoodsList.vue