Vue组件（五）- 组件的继承mixins、extends、provide、inject

╰半夏微凉° 2022-10-29 03:20 752阅读 0赞

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包含在一个对象中进行传递。