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

Question

当我尝试将道具传递给混音时，我得到了一个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
}
}