[Vue 警告]：渲染错误："TypeError: Cannot read property 'props' of undefined"(在 中找到<Root>)

Question

我使用Vue CLI创建了一个新的Vue项目。我更改App.vue如下：

<template>
<div id="app">
App.vue
</div>
</template>
<script>
import { populateTestData } from "./js/testData";
export default {
name: "App",
components: {},
mixins: [populateTestData],
methods: {
init() {
this.populateTestData();
},
},
mounted: function () {
this.init();
},
};
</script>

testData.js:

function populateTestData() {
console.log("populateTestData")
}
export { populateTestData };

当我使用npm run build执行此操作时，我会收到以下错误消息：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'props' of undefined"
(found in <Root>)
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'props' of undefined
at normalizeProps (vue.runtime.esm.js?2b0e:1419)
at mergeOptions (vue.runtime.esm.js?2b0e:1521)
at mergeOptions (vue.runtime.esm.js?2b0e:1535)
at Function.Vue.extend (vue.runtime.esm.js?2b0e:5159)
at createComponent (vue.runtime.esm.js?2b0e:3184)
at _createElement (vue.runtime.esm.js?2b0e:3434)
at createElement (vue.runtime.esm.js?2b0e:3353)
at vm.$createElement (vue.runtime.esm.js?2b0e:3494)
at Proxy.render (main.js?56d7:7)

Answer 1

testData.js没有正确定义Vue mixin。要定义要导出的方法mixin，您需要导出一个带有methods道具的对象，该道具包含您想要的方法(就像用对象语法声明一个新的组件选项一样(：

// ./js/testData.js
export default {
methods: {
populateTestData() {
//...
}
}
}

然后你的组件会使用这样的混合：

import myMixin from './js/testData'
export default {
mixins: [myMixin],
}