[VUE]vue知识漏洞恶补

平时习惯了用本身所知的方法来解决问题。今天看到本身以前写的组件被同事改了一下，看到一些没怎么用过的方法。特地去恶补了一下，算给本身打个补丁并记录一下。

provide/inject

provide,inject这个东西，说实话我我的以为至此为止，我遇到的工做中他能用的场景其实很少。这个东西就是props的增强版。
一搬父子传参咱们能够用：

1.props

父子组件间经过属性的写法，直接传参。

// 父组件
<children :parmas="data"></children>

// 子组件用props接
props:{
    data: Object
}
// 使用时直接在本vue实例用调
this.data

2.vuex

状态管理就是一个全局的库，在根部注册后，在任意实例中均可以经过store调用变量。

this.$store.state

3.provide/inject

这个就是介于前二者之间的东西。他是经过在某一父组件中注册一个变量。在其子孙组件中能够调用其变量。不局限在直接父子间。
用法：

// 父组件中
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    }
  }

// 子孙组件
  export default {
    name: "grandson",
    inject: ['for']
  }
// 调用也是跟props同样
this.for

provide/inject就是一个局部的小库。在一些总体没有必要引Vuex，在某个模块中又须要用到一个库的项目中它是能够考虑的选择。

directive（自定义指令）

须要批量操做特定dom的时候，特别是须要用到dom节点的时候。能够考虑用自定义指令完成。 这个官网解释得很详细。自定义指令

1.注册

// 注意是在根部Vue调用directive注册，这里写指令的时候不须要加"v-"
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

2.使用

// 直接加"v-"便可，dom被直接聚焦
<input v-focus>

3.生命周期（钩子）

• bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)。
• update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前。指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 所有更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

4.参数解析

• el：指令所绑定的元素，能够用来直接操做 DOM 。

• binding：一个对象，包含如下属性：

  1. name：指令名，不包括 v- 前缀。
  2. value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  3. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。不管值是否改变均可用。
  4. expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  5. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  6. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。