在使用 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 ，而不是從上到下傳遞事件處理程序。