Блог

Главная - Вопросы по программированию - Vuejs 3: Предотвращение компиляции простых HTML-тегов

Vuejs 3: Предотвращение компиляции простых HTML-тегов

#vue.js #vuejs3

Вопрос:

Я пытаюсь избежать того, чтобы Vue компилировал простые HTML-теги внутри корневого элемента. Вот пример кода:

 <body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
  <script type="application/javascript" src="my_component.js">
  <script>const app = Vue.createApp({});</script>
  <div id="app">
    <my-component></my-component>
    ...
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    ...
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    ...
  </div>
  <script>app.mount("#app");</script>
</body>

Vue 3 компилирует все элементы (простые HTML-элементы) в корневых элементах для поиска компонентов Vue, но это может быть проблемой с загрузкой, если страница очень большая и содержит не так много компонентов Vue.

Я пытался сделать что-то вроде этого:

 <script>app.config.isCustomElement = tag => tag.startsWith('div') || tag.startsWith('span');</script>

но это не игнорирует простые HTML-теги, такие как div и span.

Еще один вариант, который мне надоел, был:

   ...
  <div id="app">
    <my-component></my-component>
    ...
    <div v-pre>
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     ...
     <span>1</span>
     <span>2</span>
     <span>3</span>
     <span>4</span>
     ...
   </div>
  </div>
  ...

Это тоже было не так удачно.

Может ли кто-нибудь помочь мне с этой проблемой?

Ответ №1:

Некоторое время назад у меня было такое же требование. Сначала я добавил дополнительный атрибут для каждого компонента Vue, как это

 <my-component [load-vue]></my-component>

А затем я инициализировал каждый компонент следующим сценарием на странице. Я не уверен, что это работает для вас, но это может дать вам представление о том, как это сделать.

   document.querySelectorAll("[load-vue]").forEach(el => {
    new Vue({
      el: el
    });
  });

Предупреждение: Это работает в Vue 2, не уверен, что в Vue 3

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

1. Спасибо за ваш ответ, я этого не искал, но я понял вашу идею. Он работает с vue 2, но не с vue 3. Вы должны создать новый экземпляр для каждого компонента, и в нем есть несоответствия. Магазин Vue не работает, если вы хотите взаимодействовать между компонентами, но в разных приложениях. Но этот ответ может помочь кому-то другому, вот почему я поставил ему лайк.

Метки: