Vue3 范围类不适用于模板中未声明的元素

【问题标题】：Vue3 scoped classes are not applied for elements not declared in the templateVue3 范围类不适用于模板中未声明的元素
【发布时间】：2021-02-21 22:14:02
【问题描述】：

我有一个单文件 vue3 组件。它的模板如下所示。

<template>
  <div ref="elements"></div>
</template>

我在同一个文件中定义了样式：

<style scoped>
.el {
  color: red;
}
</style>

现在我想在脚本中添加元素。

<script>
export default {
  name: "App",
  mounted() {
    const div = this.$refs.elements;

    const el = document.createElement("div");
    el.setAttribute("class", "el");
    el.innerText = "Hello World!";

    div.appendChild(el);
  },
};
</script>

结果显示该元素没有根据作用域样式中的类进行样式设置。有没有办法将样式应用于通过脚本添加的元素，同时将样式保持在范围内？

【问题讨论】：

标签： vue.js

【解决方案1】：

经过一些研究，这似乎是一个答案。

Vue 范围样式是 Vue 的内部功能。因此，应该有一种方法可以区分不同组件上的相同类名。 Vue 通过为每个类名添加一个特殊的 id 来做到这一点。您可以通过检查浏览器中的元素来找到它（例如data-v-a2c3afe）。

在构建组件时，Vue 会处理其模板并仅正确跟踪您已声明用于渲染的节点。它不知道它可能从某个地方得到什么。它实际上是有意义的，并促使您编写您希望在模板中看到的所有内容，这样您就不会突然在 DOM 中看到错误（尤其是在您使用某人的代码时）。

我已经重写了代码，所以我仍然有范围样式，但是脚本中没有附加任何元素，现在代码可以清楚地看到正在呈现的内容。这可能是任何框架的特性 - 它让您坚持某些模式，以便团队/社区中的每个人都知道预期的行为并编写更一致的代码。

【讨论】：