Как я могу использовать $ emit с Vue.js при настройке проекта Vue CLI?

Предупреждение 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");

---

Решение № 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 является более обобщенной версией 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>

В-третьих, определите loginNewUser в вашем компоненте Home.vue.

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

Наконец, в своем текущем коде не забудьте изменить :login-user на @login-user.

---

Решение № 2

Если вы используете Vuex или планируете, вместо передачи вашего обработчика событий сверху вниз, вы можете использовать actions которые вы можете вызывать в любом месте ваших компонентов.