javascript - 使用 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 项目层次结构时，如何将数据从我的组件向上发送到我的全局范围？此方法以前有效，但我的应用程序设置略有不同，我可能会忽略一些非常重要的事情。

更多信息

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

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

[Vue warn]: Property or method "loginNewUser" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

非常感谢您花时间阅读。

Answer 1

显示警告是因为 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");

---

解决方案 #1

要解决这个问题，您必须从 main.js 传递事件处理程序给你的Home包含 3 个步骤的组件。

首先，将事件处理程序传递给App.vue通过修改你的 render在 main.js 中发挥作用来自:

render: h => h(App)

为此:

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

h is a more generalized version of createElement so basically, they're the same.

createElementaccepts several arguments and we will use the second argument whichis a data object to pass event handlers to the rendered component.

其次，在你的App组件，定义 loginNewUser并将引用传递给 router-view .

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

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

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

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

最后，在您当前的代码中，不要忘记更改 :login-user至 @login-user .

---

解决方案 #2

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