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

Question

感谢您提供任何帮助。 有谁知道如何使用 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 CLI create项目层次结构时，如何将数据从组件向上发送到全局范围？ 这种方法以前有效，但是我的应用程序设置略有不同，我可能忽略了一些非常重要的东西。

更多信息

• 如果您愿意，可以在以下位置查看此项目的完整 repo： https ://github.com/twknab/viaRV_vue_cli_project

• 在src/components/Register.vue中， 第 76 行是我尝试在第 17 行对main.js和loginNewUser()方法进行$emit调用的地方，我收到错误消息：

[Vue 警告]：属性或方法“loginNewUser”未在实例上定义，但在渲染期间被引用。 通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

非常感谢您的时间和阅读。

Answer 1

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

<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");

---

解决方案#1

要解决这个问题，您必须将事件处理程序从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参数，它是一个数据对象，将event处理程序传递给渲染的组件。

其次，在您的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 。

---

解决方案#2

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