时间戳

首页 > 解决方案 > Vuejs 3：防止编译纯 HTML 标签

vue.js - Vuejs 3：防止编译纯 HTML 标签

问题描述

我试图避免 Vue 在根元素内编译纯 HTML-Tags。这是一个代码示例：

<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>
  ...

这也不是那么成功。

有人可以帮我解决这个问题吗？

标签： vue.jsvuejs3

解决方案

前段时间我也有同样的要求。我首先像这样在每个 Vue 组件上添加了一个额外的属性

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

然后我在页面上使用以下脚本初始化每个组件。我不确定这是否适合你，但它可能会让你知道如何去做。

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

警告：这在 Vue 2 中有效，在 Vue 3 中不确定

推荐阅读