vue.js javascript 前端 前端框架 Vue2：组件进阶

动态组件

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

使用方法：

使用内置组件 component，配合 is 属性。切换时改变 is 属性的值。

内置组件 component，不需要注册组件，可以直接使用。

缺点：切换组件会频繁创建(created)和销毁(destroyed)。

App.vue

UserInfo.vue

userName.vue

组件缓存

vue 内置组件 keep-alive ，解决切换组件频繁创建销毁。

使用 组件包裹即可。

组件激活和非激活

activated 和 deactivated，组件在使用时 activated 生效；组件未使用时 deactivated 生效。

UserName.vue

组件插槽

用于不确定内容的时候，使用插槽。

匿名插槽

内置组件 slot 占位，使用组件时，使用 Pannel 夹着的地方，传入 slot 进行替换。

引入 views/UseSlot.vue 文件，替换 Pannel 内容。

views/UseSlot.vue 引入 Pannel.vue 文件，写 slot 用作占位。

App.vue

SlotPannel.vue

views/UseSlot.vue

具名插槽

插槽默认内容：

​ 给 slot 内添加的内容为默认内容。可以在 Pannel 中进行重新编写覆盖。

App.vue

SlotPannel.vue

views/UseSlot.vue

作用域插槽

Pannel 中 #title=变量名，这里的变量名是 slot 上定义的所有属性。可以任意点出 slot 上的属性。

ddd

App.vue

UseSlot.vue

SlotPanner.vue

自定义指令

当指令不能满足需求时，要自定义指令。

注册自定义指令

全局注册

// 语法格式：

Vue.directive('自定义指令名称', {

// 页面dom生成，触发 inserted

// el：真实dom

inserted (el) {

// 指令内容

}

});

Vue.directive('gColor', {

inserted (el) {

el.style.color = '#f00';

}

});

局部注册

传值

inserted 参数

参数1：真实dom元素参数2：对象，value 值是传递的参数。

update 参数（指令参数更改时触发）

参数1：真实dom元素参数2：对象，更新后的参数。

v-Color="'red'" 解释

v-Color='red' 单引号是变量，，需要在 data 中定义。v-Color="'red'" 使用单双引号交替，转为字符串。

案例：tabBar

App.vue

MyHeader.vue

MyFooter.vue

MyTable.vue（插槽模板）

MyGooldsList.vue

精彩链接

 您阅读本篇文章共花了：