directives 指令
自己创造指令
1.声明一个全局指令
- Vue.directive('y',{...})
Vue.directive('y',{ inserted:function(el){ el.addEventListener('click',() => {console.log('y')}) } })
2.声明一个局部指令
- options.directives
directives: { y: { inserted(el) { el.addEventListener("click", () => { console.log("y"); }); }, }, }
directiveOptions
五个函数属性
bind(el,info,vnode,oldVnode) -- 类似 created
只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted(el,info,vnode,oldVnode) -- 类似 mounted
被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
update(el,info,vnode,oldVnode) -- 类似 updated
所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前
componentUpdated(el,info,vnode,oldVnode)
指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind(el,info,vnode,oldVnode) -- 类似 destroyed
只调用一次,指令与元素解绑时调用
自制一个 v-on2,代替 v-on
new Vue({
directives:{
'on2':{
inserted(el,info){
el.addEventListener(info.arg,info.value)
},
unbind(el,info){
el.removeEventListener(info.arg,info.value)
},
}
},
template: `
<button v-on2:click="hi">点我</button>
`,
methods: {
hi() {
console.log("hi");
}
}
}).$mount("#app");
指令的作用
主要用于 DOM 操作
- Vue 实例用于数据绑定、事件监听、DOM 更新
- Vue 指令目的主要就是原生 DOM 操作
减少重复
- 如果某个 DOM 操作经常使用或者比较复杂,就可以封装为指令
mixins 混入
mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。
mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
- 全局用 Vue.mixin({...})
- 局部用 options.mixins:[mixin1,mixin2]
类比
- directives 的作用是减少 DOM 操作的重复
- mixins 的作用就是减少 data、methods、钩子的重复
选项合并
- 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”
- 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})
// => 1
// => 2
extends 继承
允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数),而无需使 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。
- extends 是比 mixins 更抽象一点的封装
- 全局用 Vue.extend({...})
- 局部用 options.extends:{...}
var CompA = { ... }
// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
extends: CompA,
...
}
provide / inject 提供和注入
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property
inject 选项应该是:一个字符串数组,或一个对象,对象的 key 是本地的绑定名,value 是在可用的注入内容中搜索用的 key (字符串或 Symbol),或一个对象
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。
- 祖先提供东西,后代注入东西
- 作用就是大范围、隔 N 代共享信息
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}