vue构造选项

188 阅读2分钟

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'],