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

Question

Спасибо за любую помощь, которую вы можете оказать. Кто-нибудь знает, как можно использовать метод $ emit в Vue.js для отправки данных по цепочке глобальному методу? У меня не было проблем, чтобы заставить это работать на очень простом примере с 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, в строке 76 - это место, где я пытаюсь сделать свой $emit вызов main.js и мой loginNewUser() метод в строке 17, на что я получаю сообщение об ошибке:

[Vue warn]: свойство или метод "loginNewUser" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Большое спасибо за ваше время и за чтение.

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 является более обобщенной версией 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, который вы можете вызывать в любом месте ваших компонентов.