Question

我是vue的新手，正在尝试导出/导入组件，无法弄清楚为什么下面的代码不起作用。我正在使用webpack捆绑所有内容，据我所知，它可以成功完成此操作。我收到的错误来自浏览器的控制台： 1）[Vue警告]：渲染错误：“ ReferenceError：未定义数据” 2）ReferenceError：Proxy.render（menu.js：9）中未定义数据

我不确定错误的含义，因为在我看来“数据”已定义。

如果有兴趣，请参见此处的完整源代码：https://github.com/spencel/gwpp-v1-dev

menu.js

export default {
    data() {
        return {
            routes: [ '/database-viewer' ]
        }
    },
    render( h ) {
        return (
            <div class="Menu">{data.routes[0]}</div>
        )
    }
}

我也尝试了 menu.js 的以下替代代码：从'vue / dist / vue.esm.js'导入Vue

export default Vue.component( 'Menu', {
    data() {
        return {
            routes: [ '/database-viewer' ]
        }
    },
    render( h ) {
        return (
            <div class="Menu">{data.routes[0]}</div>
        )
    }
})

index.js

import Vue from 'vue/dist/vue.esm.js'
import Menu from './components/menu.js'

window.onload = function() {

    console.log( 'starting program' )

    var app = new Vue({
        el: '#index',
        render: ( h ) => {
            return (
                <div>
                    <Menu/>
                </div>
            )
        }
    })

}

index.html

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div id="index">
        </div>
    </body>
</html>

Answer 1

我认为问题出在JSX渲染功能中，您应该使用this.routes[0]而不是data.routes[0]

vue jsx组件的“未定义数据”

1 个答案: