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

Question

Я конвертирую проект 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');

Answer 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'));

Answer 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');
});