Vue：进阶构造属性

Directives 指令

自定义指令

之前已经学习了一些内置指令，比如v-if、v-for、v-show、v-html等

那么怎么自己造一个指令呢？

目标：造v-x，点击即出现一个x

两种写法

声明一个全局指令

Vue.directive('x',directiveOptions)

示例：全局指令 v-x

声明一个局部指令

new Vue({
  ...,
  directives: {
    "x": directiveOptions
  }
})

v-x 只能用在该实例中，点击查看示例

directiveOptions

• bind(el,info,vnode,oldVnode)

  只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

• inserted(el,info,vnode,oldVnode)

  被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

• update(el,info,vnode,oldVnode)

  所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有

• componentUpdated(el,info,vnode,oldVnode)

  指令所在组件的 VNode 及其子 VNode 全部更新后调用

• unbind(el,info,vnode,oldVnode)

  只调用一次，指令与元素解绑时调用

自制 v-on2 指令，模仿 v-on

缩写：directiveOptions在某些条件下可以缩写为函数，指路官方文档

指令的作用

主要用于DOM操作

Vue 实例/组件用于数据绑定、事件监听、DOM更新

Vue 指令只要目的是原生DOM操作

减少重复

如果某个 DOM 操作经常使用，就可以封装为指令

如果每个 DOM 操作比较复杂，也可以封装为指令

---

mixins 混入

减少重复

类比

directives作用是减少 DOM 操作的重复

mixins作用是减少 data、methods、钩子的重复

场景描述

示例

假设需要在每个组件上添加name和time，在created、destoryed时，打出提示，并报出存活时间。

一共有五个组件，怎样做？

思路1——给每个组件添加data和钩子，共五次

思路2——或者使用mixins减少重复

mixins技巧

选项智能合并

官方文档

Vue.mixin

全局mixin，官方文档

---

extends 继承

示例

减少重复——与mixins同样的需求：

如果不想每次都写一个mixins，可以使用Vue.extend或options.extends

extends是比mixins更抽象的封装，实际工作中用得很少

---

provide 提供 和 inject 注入

需求

示例

场景描述：

• 实现一键换肤功能：默认蓝色，可切换为红色

• 文字大小：默认正常，可改成大或小

总结

作用

大范围的data和method等共用

注意

不能只传themeName，不传changeTheme，因为themeName的值是被复制给provide的