如何在Vue根组件中通过方法接收数据，调用返回undefined是什么原因

• 大小写拼写错误：JavaScript 是大小写敏感的语言，你定义的方法名为showData，调用时写的showdata名称不匹配，无法找到对应方法。
• 调用方法未加执行符号：即便名称拼写正确，someForm.showdata只是获取方法对象本身，不会执行方法返回结果，需要添加()执行方法才能拿到返回值。
• 模板事件绑定与定义方法名不匹配：模板中按钮绑定的点击事件名为submitProduct，但你实际定义的处理方法名为submitBtn，二者名称不一致，点击按钮时根本不会触发对应逻辑。
• Vue 应用未挂载：调用createApp创建应用实例后，没有执行.mount('#form')挂载到对应DOM节点，Vue 不会接管页面对应区域的渲染和事件监听。
• 实例访问方式不规范：方法内部直接通过外部变量someForm访问实例不符合Vue的设计规范，方法内部的this默认指向当前Vue实例，直接用this访问即可。

<div id="form">
    <button v-on:click="submitBtn">Save</button>
</div>
<script>
    var someForm = Vue.createApp ({
        methods: {
            submitBtn: function(){
                // 这里能正确拿到返回值 1
                const res = this.showData()
                console.log(res) // 控制台输出 1
            },
            showData: function(){
                return 1
            }
        }
    }).mount('#form') // 补充挂载逻辑
</script>

内容的提问来源于stack exchange，提问作者v01d