vue浏览器编译时 节点上出现data-v-xxx和父组件改变子组件的内部样式

一、data-v-xxx

vue页面被浏览器解析后,在标签中出现’data-v-xxxxx’标记,如下: 

原因:
在vue文件的css中样式加了scoped

<style scoped>
    .FooterGuide{
        color: pink
    }
</style>

这是在标记vue文件中css时使用scoped标记产生的,因为要保证各文件中的css不相互影响,给每个component都做了唯一的标记,所以每引入一个component就会出现一个新的’data-v-xxx’标记。

需求描述:由于样式中使用了scoped,所以编译后标签对中生成data-v-xxx属性。在【.dialog_content】的div中 动态添加元素节点p和span时,也需要给元素节点添加data-v-xxx属性。由于data-v-xxx属性是会变化的,那如何获取它,添加在动态添加的元素节点中呢?
【解决方法】

获取属性名【document.getElementById("dialog_submit").attributes[0].name】

设置属性【nodeP.setAttribute(dataV, "")】

var nodeP = document.createElement("p"),
nodeSpan = document.createElement("span");
// 获取data-v-xxxx的值
var dataV = document.getElementById("dialog_submit").attributes[0].name;
// 设置属性
nodeP.setAttribute(dataV, "");
nodeSpan.setAttribute(dataV, "");

二、深作用选择器

如果希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,可以使用 >>> 操作符:

<style scoped>
    .a >>> .b { /* ... */ }
</style>

上述代码被编译为:

.a[data-v-f3f3eg9] .b { /* ... */ }

如果是有些像Sass、less之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。如下:

<style scoped lang="scss">
h1 {
  color: brown;
}
.home {
  /deep/ .title {
    color: rebeccapurple;
  }
}
</style>

小提示:

上述方法只针对于子组件内部的样式,在父组件中子组件的 widthheight等属性不属于子组件的内部的样式哦,直接用常规方法修改即可。

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页