vue2.x.0 版本新增的 API
1、inheritAttrs、$attrs、$listeners
inheritAttrs 是 vue2.4.0 版本新增的组件配置项,主要是为了清除在引用子组件时候配置的多余的属性的;例如: 在父组件中我们引用了子组件 <child-com :di='1' name='child' />; 但是我们在子组件中只用了 id 的属性值,这时候在子组件的根元素上还是会有 name 这个属性,如果我们想要清除,在子组件中就可以这样写
export default { name: 'child', props: ['id'], inheritAttrs: false }
$attrs 是组件的内置属性,主要用来获取在父组件总定义了的属性,但是在子组件的 props 中没有定义接收的参数,除了 class 和 style 之外;例如上边的例子通过 vm.$attrs 获取的就是包含 name 属性的一个对象;
$listeners 获取的是父组件中引用的时候绑定的事件,除了用 .native 修饰符修饰的事件;
2、组件选项 provide 和 inject
这两个方法是在 vue2.2.0 中新增的,主要是用来进行组件传值的,在 祖孙关系的 组件中应用比较多一点,跟 react 中的上下文特性(context)很相似;
在祖先组件中进行 provide:{data: '数据'} 定义之后,在子组件中通过 inject:[ 'data' ] 进行接收,然后通过 this.data 就可以获取到了;
provide 的值可以是一个对象也可以是一个返回值为对象的函数;
inject 的值可以是一个字符串数组或者一个对象,该对象的 key 是在子组件要用的属性,value 是祖先组件中 provide 定义的一个 key;
3、作用域插槽 slot-scope
作用域插槽是在 vue2.1.0 的版本中新增的,它的添加允许在 template 中内嵌 template ,然后通过 slot-scope 获取一个数据,这个数据就可以获取子组件中绑定在 slot 插槽上所有的属性,作为一个对象返回出来,其实用法跟 element 中 table 的是一样的;
4、vue 的错误捕获
全局配置 errorHandler 是在 vue2.2.0 的版本中新增的,但是在这个版本中这个钩子也会捕获到组件生命周期钩子函数中的错误;在 vue2.4.0 这个犯法也支持在 vue 自定义事件处理函数内部错误的捕获;
在 vue2.5.0 又新增了 errorCaptured 生命周期钩子函数,这个钩子来时进行异常捕获的,但是不能捕获自身钩子内的异常;