4

当我尝试将道具传递给 mixin 时，我得到一个Cannot read property of undefined error.

我是不是做错了什么，或者我还能如何克服这个问题？

mixins/BarMixin.js：

export default baz => {
  return {
    // my mixin code...
  }
}

components/FooComponent.vue：

<script>
import BarMixin from '@/mixins/BarMixin.js'

export default {
  mixins: [BarMixin(this.baz)],
  props: {
    bar: {
      type: Boolean,
      required: true,
    },
  },
}
</script>

然后我尝试使用它，如下所示：

pages/foo.vue

<template>
  <FooComponent :baz="true" />
</template>

<script>
import FooComponent from '@/components/FooComponent.vue'
export default {
  components: {
    FooComponent,
  },
}
</script>
4

2 回答 2

2

您可以通过从组件访问这些属性来解决问题，就好像混合是组件一样。要使属性“动态”，您可以在 mixin 中传递您需要访问的字段的名称。像这样：

function myMixin(propName) {
  return {
    computed: {
      mixinComputed () {
        return this[propName] + 'somethingElse';
      }
    }
  };
}

如果您想将对象的内部属性（例如“user.name”）传递给 mixin，您可以在外部组件上创建一个计算对象，或者将其设置在 mixin 本身内部：

function myMixin(propName1, propName2) {
  return {
    computed: {
      mixinComputed () {
        return this.parsedPropValue1 + this.parsedPropValue2;
      },
      parsedPropValue1 () {
        return this.parsePath(propName1);
      },
      parsedPropValue2 () {
        return this.parsePath(propName2);
      }
    },
    methods: {
      parsePath(path) {
        if (!path)
         return;
        const split = path.split('.');
        return split.reduce((acc, curr) => acc && acc[curr], this);
      }
    }
  };
}

用法：

mixins: [myMixin('user.address.street', 'obj')]
于 2020-06-26T21:09:02.970 回答
1

不能动态地将参数传递给 Vue mixins。

但是，您可以使用此功能方法作为替代方法：

 function BarMixin(param) {
  return {
    data() {
      return {
       ....
      }
    }
    // your mixin code
  }
 }
于 2019-11-22T15:53:45.523 回答