mixins(混入)和extends(扩展)可以理解为继承,mixins接收对象数组,可理解为多继承;extends接收的是对象或函数,可理解为单继承。
provide和inject是成对出现的,用于父组件向后代组件传递数据。

mixins 混入

mixins选项用于分发 Vue 组件中的可复用功能,如在项目中提取公用的数据或者通用的方法,并且这些数据与方法不需要组件间进行维护的场景。
mixins选项接受一个混入对象的数组,混入对象像正常的实例对象一样包含任意组件选项
当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

特点

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。

  • 选项为data :在发生冲突时以组件数据优先
  • 值为函数的选项,如生命周期钩子函数created,mounted等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用
  • 值为对象的选项,例如 methods、components和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
  • 方法和参数在各组件中不共享

当混合里面包含异步请求函数,而我们又需要在组件中使用异步请求函数的返回值时,我们应不要返回结果而是直接返回异步函数

与组件的区别

组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

extends 扩展

mixins 类似,extends选项接受一个对象,extends会比mixins先执行。执行顺序:extends > mixins > 组件

provide和inject

通常在组件通信中通过子组件的props属性接收来自父组件的数据,在项目实际中,
组件的层次可能很多,如果需要在子孙组件中获取祖先组件的数据,在不引入 Vuex的前提下,可以使用provide和inject选项。
具体方法是在祖先组件中配置provide选项,提供数据;在后代组件中配置inject选项注入数据。

1、在祖先组件的provide选项返回要传给下级的数据

provide选项可以是一个对象或返回一个对象的函数

// 对象写法
	provide: {
	  id: 1
	}
	// 函数写法
	provide () {
	  return {
	    id: 2
	  }
	}

2、在需要使用这个数据的子孙级组件中inject选项注入

inject选项可以是一个字符串数组或一个对象。如果是对象则可以配置from和default两个属性,其中:default 用于在没有注入此数据时,配置默认值; from 用于想在后代组件中使用不同的名字时,指定来源。

后代组件:

// 字符串数组
inject: ['id']
// 对象
inject: {
 articleId: {
   from: 'id',
   default: 1
 }
}

provide 和 inject 绑定并不是可响应的。如上面的例子中provide的id被修改了,后代组件的id不会改变,解决的办法可以是将id包含在一个对象中进行传递。