在使用Vue CLI项目设置时，如何将$emit与Vue.js一起使用

感谢您提供的任何帮助。有人知道如何使用Vue.js中的$emit方法将数据向上发送到全局方法吗？我在Vue.js的一个非常基本的例子中没有遇到任何问题。然而，一旦使用Vue CLI和更高级的文件夹结构设置了我的项目，我的方法似乎无法正确注册。

在我的Register.vue组件中，我注册了一个新用户，这样做后，我想向上发送新用户以更新我的全局范围：

this.$emit("login-user", newUser);

我的组件注册如下：

<Register msg="Otherwise, go ahead and register here:" :login-user="loginNewUser"/>

其中:login-user引用全局方法：loginNewUser()。

loginNewUser()方法在main.js:中设置如下

new Vue({
router,
store,
render: h => h(App),
methods: {
loginNewUser(user) {
console.log(user);
}
}
}).$mount("#app");

我的方法放错地方了吗？使用Vue CLIcreate项目层次结构时，如何将数据从组件向上发送到全局范围？这种方法以前是有效的，但我的应用程序设置略有不同，我可能忽略了一些非常重要的东西。

更多信息

如果您愿意，可以在以下位置查看此项目的完整回购：https://github.com/twknab/viaRV_vue_cli_project
在src/components/Register.vue中，第76行是我尝试对main.js和第17行的loginNewUser()方法进行$emit调用的地方，我收到错误消息：

[Vue warn]：属性或方法"loginNewUser"未在实例上定义，但在渲染过程中被引用。通过初始化该属性，确保该属性在数据选项中是被动的，或者对于基于类的组件是被动的。

非常感谢您抽出时间阅读。

显示警告是因为loginNewUser在Home组件中被引用：

<Register msg="Otherwise, go ahead and register here:" @login-user="loginNewUser"/>

但是，loginNewUser不是在Home组件中定义的，而是在组件层次结构中的三级main.js文件中定义的：main.js > App.vue > Home.vue

new Vue({
router,
store,
render: h => h(App),
methods: {
loginNewUser(user) {
// existing code here
}
}
}).$mount("#app");

要解决这个问题，您必须将事件处理程序从main.js传递到Home组件，这涉及3个步骤。

首先，通过从修改main.js中的render函数，将事件处理程序传递给App.vue

render: h => h(App)

到此：

render: function(createElement) {
return createElement(App, {
on: {
loginNewUser: this.loginNewUser
}
})
}

h是createElement的一个更广义的版本，所以基本上，它们是相同的。

createElement接受几个参数，我们将使用second参数是将CCD_ 28处理程序传递给渲染组件的数据对象。

第二个，在App组件中，定义loginNewUser并将引用传递给router-view。

export default {
name: "App",
methods: {
loginNewUser() {
this.$emit('loginNewUser');
}
}
}

<router-view @login-new-user="loginNewUser"></router-view>

第三，在Home.vue组件中定义loginNewUser。

export default {
name: "home",
components: {
Login,
Register
},
methods: {
loginNewUser() {
this.$emit('loginNewUser');
}
}
};

最后在当前代码中，不要忘记将:login-user更改为@login-user。

如果您正在使用或计划使用Vuex，而不是从上到下传递事件处理程序，则可以使用actions，您可以在组件中的任何位置调用它。