VUEvue知识漏洞恶补 | 乐趣区

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

provide/inject

provide,inject这个东西，说实话我个人觉得至此为止，我遇到的工作中他能用的场景其实不多。这个东西就是props的加强版。
一搬父子传参我们可以用：

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

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

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

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

this.$store.state

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

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

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

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

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

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

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

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