Блог

Главная - Вопросы по программированию - Вручную смонтировать глобально зарегистрированный компонент Vue в устаревшее приложение?

Вручную смонтировать глобально зарегистрированный компонент Vue в устаревшее приложение?

#javascript #angularjs #vue.js #vuejs2

#javascript #angularjs #vue.js #vuejs2

Вопрос:

Я конвертирую проект AngularJS в Vue 2.

Моя стратегия заключается в том, чтобы AngularJS обрабатывал маршрутизацию и медленно менял отдельные компоненты в каждом угловом представлении.

В моем main.ts файле я импортирую и определяю глобальные компоненты следующим образом:

 import LoginForm from './components/LoginForm.vue';
Vue.component('LoginForm', LoginForm);

Когда загрузится соответствующий контроллер Angular, я хотел бы запустить некоторый javascript, чтобы вручную смонтировать компонент Vue.

Это хороший подход?

Как я могу вручную смонтировать ранее зарегистрированный компонент?

Vue.somehowGetComponent('LoginForm').mountTo('#login-form');

Ответ №1:

Я бы не стал регистрировать его как глобальный компонент для этой цели. Просто импортируйте его, затем создайте его экземпляр и смонтируйте. например.

   // import the component
  import LoginForm from './components/LoginForm.vue';

  // If you haven't already, must call `Vue.extend` on LoginForm before its instantiation

  const myLoginForm = new LoginForm();

  // mount to your legacy app
  myLoginForm.$mountTo(document.getElementById('login-form'));

Комментарии:

1. Спасибо за отзыв! Как я могу import использовать его в своем устаревшем коде, если он не конвертирован / транспилирован в babel, как остальная часть приложения Vue?

2. Я бы использовал глобальную переменную в области окна. Не самый приятный, но вы, по сути, делаете это с помощью своего глобально зарегистрированного решения Vue component. Если вы поместите его в какой-то объект window.VUES_LEGACY_ANGULAR.LoginForm, его будет немного проще искать, если вам когда-нибудь понадобится рефакторинг.

3.Я не могу запустить new LoginForm() . Есть идеи, почему? все остальное совпадает с вашим примером ( import LoginForm from './components/LoginForm.vue'; Uncaught TypeError: window.VueComponents.LoginForm is not a constructor

4. Похоже, вы разобрались. Обычно я использую Vue.extend при определении перед экспортом. Также рекомендовал бы, чтобы любые глобальные окна хранились в объекте контейнера, небольшая вещь, но облегчает их отслеживание. Однако главное, что вы заставили его работать!

5. Да, спасибо за вашу помощь! Сэкономил мне много времени. Я дам вам чек за то, что вы указали мне правильное направление!

Ответ №2:

Ключевым моментом здесь был вызов Vue.extend моего импортированного компонента:

В Vue.js:

 // main.ts
import LoginForm from './components/LoginForm.vue';
window.LoginForm = Vue.extend(LoginForm)

Затем в контроллере AngularJS:

 angular.module('app').controller(function(){
    var vue = new window.LoginForm();
    vue.$mount('#login-form');
});