Directives
Directives(指令)用来创建指令,多用来处理DOM操作。当在使用vue时不得不操作DOM使用directives将DOM操作封装起来。
directives: {
// 指令名
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
使用指令
v-focus:xxx="value"
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind(el,info,vnode,oldVnode):只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted(参数同上):被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update(参数同上):所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated(参数同上):指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind(参数同上):只调用一次,指令与元素解绑时调用。
Mixin
mixin(混入)用于将组件中可能复用的代码抽取出来作为一个对象,一个混入对象可以包括任何选项。
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
全局混入
Vue.mixin(options)
使用全局混入会使所有的组件都拥有全局的混入对象。(不推荐使用)
extend
Vue.extend(options)
extend的作用与mixins类似都用于复制options。可以将所有的混入写在extend中,让组件继承使用。不过一般使用mixins就够了。
var CompA = { ... }
// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
extends: CompA,
...
}
provide / inject
祖先提供东西,后代注入东西。 作用是范围大,隔N带共享信息。
父组件
provide:{
dataName:this.dataName,
fncName:this.fncName
}
子组件
inject: ['dataName','fncName'],