Question

当我尝试将道具传递给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>

Answer 1

您可以通过从组件访问这些属性来解决，就像混合是组件一样。为了使属性“动态”，您可以在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')]

Answer 2

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

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

 function BarMixin(param) {
  return {
    data() {
      return {
       ....
      }
    }
    // your mixin code
  }
 }

将prop传递给vuejs mixin但属性未定义

2 个答案: