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

【问题标题】："data not defined" for vue jsx componentvue jsx组件的“数据未定义”
【发布时间】：2019-01-20 20:49:50
【问题描述】：

我是 vue 新手，正在尝试导出/导入组件，但不知道为什么下面的代码不起作用。我正在使用 webpack 来捆绑所有东西，据我所知它正在成功地做到这一点。我得到的错误来自浏览器的控制台： 1）[Vue警告]：渲染错误：“ReferenceError：数据未定义” 2) ReferenceError: data is not defined at 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>

【问题讨论】：

标签： vue.js import export vue-component jsx

【解决方案1】：

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

【讨论】：