Question

我有一个组件需要mixin，具体取决于它收到的道具。

const timerMixin = {
    created() {
        console.log("Timer mixin injected")
    }
}

export default {
    name: 'Component A',
    props: ['hasTimer'],
    mixins: this.hasTimer ? [timerMixin] : [] // fails because `this` is not available here 
}

有没有办法动态地将mixin注入组件？

Answer 1

不幸的是，目前无法动态添加或删除组件的mixin。 this var在该范围内不可用。在最早的lifecycle hook，beforeCreate中，mixins已经加载。

在您的情况下，根据timerMixin mixin中的内容，使用相关逻辑制作单独的计时器组件可能是有意义的，这些逻辑可以在Component A的模板中动态加载。

否则，总是加载mixin可能不会太糟糕（性能方面），因为数据会被反应。

Answer 2

你无法做到这一点，而且实际上是按照设计而非偶然的，正如Evan You在this github issue所述：

我不喜欢运行时混合的想法，因为它会使你的组件成为＆＃39;行为不可预测取决于何时应用mixins。

这意味着您无法在事后分配select company0_.ID as ID1_9_0_, warrantype1_.ID as ID1_36_1_, partsrequi2_.ID as ID1_20_2_, claimtype4_.ID as ID1_8_3_, autohandle5_.ID as ID1_4_4_, autohandle6_.ID as ID1_5_5_, customer7_.ID as ID1_14_6_, company0_.CREATED as CREATED2_9_0_, company0_.UPDATED as UPDATED3_9_0_, company0_.AUTO_REJECT_USER as AUTO_REJ4_9_0_, company0_.CLAIM_CREDIT_ORDER_HISTORY as CLAIM_CR5_9_0_, company0_.CLAIM_ORDER_HISTORY as CLAIM_OR6_9_0_, company0_.COMPANY_CODE as COMPANY_7_9_0_, company0_.COMPANY_NAME as COMPANY_8_9_0_, company0_.CONNECTED_TO_ERP as CONNECTE9_9_0_, company0_.DEFAULT_CUSTOMER_ID as DEFAULT16_9_0_, company0_.DATE_FORMAT as DATE_FO10_9_0_, company0_.DISPLAY_WORK_LOCATION as DISPLAY11_9_0_, company0_.DISTANCE_UNIT as DISTANC12_9_0_, company0_.ENABLE_SHIPPING_LABEL as ENABLE_13_9_0_, company0_.HANDLE_CREDIT_INVOICES as HANDLE_14_9_0_, company0_.RETURNS_PARTS_DAYS as RETURNS15_9_0_, warrantype1_.CREATED as CREATED2_36_1_, warrantype1_.UPDATED as UPDATED3_36_1_, warrantype1_.COMPANY_ID as COMPANY_8_36_1_, warrantype1_.PERIOD_CONSUMER as PERIOD_C4_36_1_, warrantype1_.PERIOD_PROFESSIONAL as PERIOD_P5_36_1_, warrantype1_.PRODUCT_GROUP as PRODUCT_6_36_1_, warrantype1_.PRODUCT_NO as PRODUCT_7_36_1_, warrantype1_.COMPANY_ID as COMPANY_8_36_0__, warrantype1_.ID as ID1_36_0__, partsrequi2_.CREATED as CREATED2_20_2_, partsrequi2_.UPDATED as UPDATED3_20_2_, partsrequi2_.COMPANY_ID as COMPANY_5_20_2_, partsrequi2_.PRODUCT_NO as PRODUCT_4_20_2_, partsrequi2_.COMPANY_ID as COMPANY_5_20_1__, partsrequi2_.ID as ID1_20_1__, claimtype4_.CREATED as CREATED2_8_3_, claimtype4_.UPDATED as UPDATED3_8_3_, claimtype4_.CATEGORY as CATEGORY4_8_3_, claimtype4_.CLAIM_TYPE as CLAIM_TY5_8_3_, claimtype4_.SORT_ORDER as SORT_ORD6_8_3_, claimtype4_.TEXT_KEY as TEXT_KEY7_8_3_, claimtypes3_.COMPANY_ID as COMPANY_2_10_2__, claimtypes3_.CLAIMTYPE_ID as CLAIMTYP1_10_2__, autohandle5_.CREATED as CREATED2_4_4_, autohandle5_.UPDATED as UPDATED3_4_4_, autohandle5_.[ACTION] as ACTION4_4_4_, autohandle5_.[ACTIVE] as ACTIVE5_4_4_, autohandle5_.[ASSIGN] as ASSIGN6_4_4_, autohandle5_.[COMPANY_ID] as COMPANY_8_4_4_, autohandle5_.[NAME] as NAME7_4_4_, autohandle5_.[COMPANY_ID] as COMPANY_8_4_3__, autohandle5_.ID as ID1_4_3__, autohandle6_.CREATED as CREATED2_5_5_, autohandle6_.UPDATED as UPDATED3_5_5_, autohandle6_.AUTO_HANDLE_ID as AUTO_HAN7_5_5_, autohandle6_.[OPERATOR] as OPERATOR4_5_5_, autohandle6_.[TYPE] as TYPE5_5_5_, autohandle6_.[VALUE] as VALUE6_5_5_, autohandle6_.AUTO_HANDLE_ID as AUTO_HAN7_5_4__, autohandle6_.ID as ID1_5_4__, customer7_.CREATED as CREATED2_14_6_, customer7_.UPDATED as UPDATED3_14_6_, customer7_.COMPANY_ADDRESS as COMPANY_4_14_6_, customer7_.STREET as STREET5_14_6_, customer7_.ZIPCODE as ZIPCODE6_14_6_, customer7_.COMPANY_ID as COMPANY_9_14_6_, customer7_.CUSTOMER_NO as CUSTOMER7_14_6_, customer7_.NAME as NAME8_14_6_ from COMPANY company0_ left outer join WARRANTY_PERIOD warrantype1_ on company0_.ID=warrantype1_.COMPANY_ID left outer join PART_REQUIRED_RETURN partsrequi2_ on company0_.ID=partsrequi2_.COMPANY_ID left outer join COMPANY_CLAIMTYPE claimtypes3_ on company0_.ID=claimtypes3_.COMPANY_ID left outer join CLAIM_TYPE claimtype4_ on claimtypes3_.CLAIMTYPE_ID=claimtype4_.ID left outer join AUTO_HANDLE autohandle5_ on company0_.ID=autohandle5_.[COMPANY_ID] left outer join AUTO_HANDLE_CONDITION autohandle6_ on autohandle5_.ID=autohandle6_.AUTO_HANDLE_ID left outer join CUSTOMER customer7_ on company0_.DEFAULT_CUSTOMER_ID=customer7_.ID，并且在mixin加载之前无法获得this上下文。

我不完全确定你打算在这里做什么，但是如果你只是不想启动计时器mixin，那么你可以在之前创建的mixins中检查你采取任何进一步的行动（我个人也会将mixin道具添加到mixin中，但我会保留你的方式），所以你得到：

hasTimer

这里是JSFiddle：https://jsfiddle.net/gnkha6hr/

Answer 3

还有另一种尝试的方法

import myMixin from './views/mixin.js';
import component'./views/component.vue';


const _component = { ...component, };
_component .mixins = [myMixin];


export const router = [

  {
    path: '/path1', //
    name: 'path1',
    component: component,
  },


  {
    path: '/path2', //
    name: 'path2',
    component: _component ,
  }

];

如何将mixin动态注入组件

3 个答案: