Vue3.x 如何操作 v-html 指令里 HTML 的 DOM

Vue3.x 如何操作 v-html 指令里 HTML 的 DOM

在 Vue3.x 中，v-html 指令用于将 HTML 字符串渲染为真实的 DOM 元素，但这些 DOM 元素并不是由 Vue 的模板编译器直接管理的，因此无法像普通模板中的元素那样通过 ref 或指令直接操作。不过，仍然可以通过 JavaScript 的 DOM API 或其他方法来操作 v-html 渲染的 DOM 元素。以下是具体操作方式：

---

1. 使用 ref 获取父容器并操作子元素

使用 ref 和 onMounted 获取并操作 v-html 渲染的 DOM。

<template>
  <div ref="htmlContainer" v-html="htmlContent"></div>
</template>

<script setup>
  import { ref, onMounted } from "vue";

  // 定义 HTML 内容
  const htmlContent = ref('<p class="my-paragraph">Hello, Vue!</p>');
  // 定义 ref 用于获取 DOM 容器
  const htmlContainer = ref(null);

  onMounted(() => {
    // 获取 v-html 渲染的 DOM 元素
    const paragraph = htmlContainer.value.querySelector(".my-paragraph");
    if (paragraph) {
      paragraph.textContent = "Modified content";
      paragraph.style.color = "red";
    }
  });
</script>

说明：

• ref="htmlContainer" 绑定在父元素上。
• 在 mounted 生命周期钩子中，v-html 的内容已经被渲染到 DOM，此时可以通过 querySelector 或其他 DOM 方法访问子元素。
• 注意确保 DOM 已渲染，避免在 v-html 未加载时操作（例如使用 nextTick）。

---

2. 动态更新并操作 DOM

使用 nextTick 确保动态更新后的 DOM 可被操作。

<template>
  <div ref="htmlContainer" v-html="htmlContent"></div>
  <button @click="updateContent">Update</button>
</template>

<script setup>
  import { ref, nextTick } from "vue";

  const htmlContent = ref('<p class="my-paragraph">Initial content</p>');
  const htmlContainer = ref(null);

  const updateContent = async () => {
    htmlContent.value = '<p class="my-paragraph">Updated content</p>';
    await nextTick(); // 等待 DOM 更新
    const paragraph = htmlContainer.value.querySelector(".my-paragraph");
    if (paragraph) {
      paragraph.style.fontSize = "20px";
    }
  };
</script>

说明：

• nextTick 确保在 htmlContent 更新并渲染后操作 DOM。
• async/await 使代码更清晰。

---

3. 监听 DOM 变化（MutationObserver）

如果 v-html 的内容会频繁动态变化，而需要实时操作其中的 DOM，可以使用 MutationObserver 监听 DOM 变化。

<template>
  <div ref="htmlContainer" v-html="htmlContent"></div>
  <button @click="changeContent">Change</button>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from "vue";

  const htmlContent = ref('<p class="my-paragraph">Initial content</p>');
  const htmlContainer = ref(null);

  const changeContent = () => {
    htmlContent.value = '<p class="my-paragraph">New content</p>';
  };

  onMounted(() => {
    const observer = new MutationObserver(() => {
      const paragraph = htmlContainer.value.querySelector(".my-paragraph");
      if (paragraph) {
        paragraph.style.color = "blue";
      }
    });
    observer.observe(htmlContainer.value, { childList: true, subtree: true });
  });

  onUnmounted(() => {
    // 清理 observer，避免内存泄漏
    observer.disconnect();
  });
</script>

说明：

• MutationObserver 监听 DOM 变化，适合动态内容场景。
• onUnmounted 清理观察者，避免内存泄漏。

---

4. 动态绑定事件

可以在 v-html 的 HTML 字符串中直接嵌入事件监听器（例如 onclick），然后在全局或组件中定义对应的方法。

<template>
  <div ref="htmlContainer" v-html="htmlContent"></div>
</template>

<script setup>
  import { ref, onMounted } from "vue";

  const htmlContent = ref('<button class="my-button">Click me</button>');
  const htmlContainer = ref(null);

  onMounted(() => {
    const button = htmlContainer.value.querySelector(".my-button");
    if (button) {
      button.addEventListener("click", () => {
        alert("Button clicked!");
      });
    }
  });
</script>

说明：

• 使用 addEventListener 为 v-html 中的元素绑定事件。
• 事件逻辑与 DOM 操作分离，符合组合式 API 的模块化思想。

---

5. 封装为可复用函数

将操作 v-html DOM 的逻辑封装为一个组合式函数，方便在多个组件中使用。

<template>
  <div ref="htmlContainer" v-html="htmlContent"></div>
  <button @click="updateContent">Update</button>
</template>

<script setup>
  import { ref, onMounted } from "vue";

  // 封装操作 v-html DOM 的组合式函数
  function useVHtmlDom(containerRef, htmlContent) {
    const updateStyle = () => {
      const paragraph = containerRef.value.querySelector(".my-paragraph");
      if (paragraph) {
        paragraph.style.color = "green";
      }
    };

    onMounted(() => {
      updateStyle();
    });

    return { updateStyle };
  }

  const htmlContent = ref('<p class="my-paragraph">Hello, Vue!</p>');
  const htmlContainer = ref(null);

  // 使用组合式函数
  const { updateStyle } = useVHtmlDom(htmlContainer, htmlContent);

  const updateContent = () => {
    htmlContent.value = '<p class="my-paragraph">Updated content</p>';
    updateStyle(); // 手动调用更新样式
  };
</script>

说明：

• useVHtmlDom 是一个可复用的组合式函数，封装了 DOM 操作逻辑。
• 通过返回值暴露方法，供组件按需调用。

---

注意事项

1. 安全性：v-html 渲染的 HTML 如果来自用户输入，需使用库（如 sanitize-html）清理，防止 XSS 攻击。
2. 类型检查：在使用 TypeScript 时，确保为 ref 指定类型，例如 ref<HTMLElement | null>。
3. 性能：避免频繁查询 DOM，必要时缓存查询结果。

---

总结

使用组合式 API 操作 v-html 中的 DOM，主要步骤包括：

1. 使用 ref 定义 HTML 内容和容器引用。
2. 在 onMounted 或 nextTick 中通过 DOM API 操作元素。
3. 根据需求使用 MutationObserver 或事件监听器处理动态变化。
4. 可将逻辑封装为组合式函数，提高复用性。