时间戳

首页 > 解决方案 > 渲染中的Vuejs错误：“TypeError：无法读取未定义的属性'props'”Vuejs

javascript - 渲染中的Vuejs错误：“TypeError：无法读取未定义的属性'props'”Vuejs

问题描述

我想知道为什么我会收到这个简单代码的警告和错误。我正在使用 vue 模板。这是我的第一个 Vue 应用程序，所以请提供更多详细信息，以便我跟进。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'props' of undefined"

found in

---> <App> at src/App.vue
       <Root>

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:5153)
at createComponent (vue.runtime.esm.js?2b0e:3184)
at _createElement (vue.runtime.esm.js?2b0e:3416)
at createElement (vue.runtime.esm.js?2b0e:3353)
at vm._c (vue.runtime.esm.js?2b0e:3485)
at Proxy.render (eval at ./node_modules...

这是孩子的vue

Animakit.vue

    <template>

        <div id="Animakit">
         In Animakit

        </div>
    </template>


    <script>

        import firstOne from '../animakit.js'
        export default {
            name: 'Animakit',
            mixins: [firstOne],
            mounted: function () { this.firstOne() }
        }
    </script>

这是主要的App vue

应用程序.vue

<template>
    <div id="app">
        <Animakit></Animakit>
        <div>hello in App.vue </div>
    </div>
</template>

<script>
    import Animakit from './components/Animakit.vue'

    export default {
        components: {
            'Animakit': Animakit
        }
    }
</script>

这就是 App vue 的使用方式。

main.js

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import axios from 'axios';
import App from './App.vue';


const http = axios.create({
    baseURL: process.env.BACKEND_URL ? process.env.BACKEND_URL : 'http://localhost/todos',
});

Vue.prototype.$http = http;

Vue.use(BootstrapVue);

Vue.config.productionTip = false;

new Vue({

    render: (h) => h(App),
}).$mount('#app');

JavaScript 文件 animakit.js的内容

function firstOne() {


}
export default firstOne;

标签： javascriptvue.js

解决方案

Mixin 配置与组件配置非常相似。要创建一个调用的方法，firstOne您需要执行以下操作：

export default {
  methods: {
    firstOne () {

    }
  }
};

Vue 会自动将 mixin 配置合并到组件的配置中。官方文档中有更多关于此的内容，https://vuejs.org/v2/guide/mixins.html#Option-Merging。

推荐阅读