vue中组件根元素添加样式无效

1.父级调用了组件，indicators_board,并且添加了id=indicators,这个时候id上添加的样式会添加到组件的根元素上，

2.组件根元素也添加id写入样式，会导致失效，最好是添加类选择器，或者保证一个地方添加样式，这样就不会导致错误

<div id="combination"><indicators_board id='indicators'></indicators_board></div>

<template><div id="indicators_board" class="boxs"></div>
</template>

最优的解决方案：

1.父组件用id定义根元素的样式，子组件用类选择器定义样式，

2.这样的好处是：灵活使用默认或者重新定义的样式，调用组件时，如果定义了组件根元素的样式，则用该样式，否则就用用组件类选择器的默认样式

vue中组件根元素添加样式无效相关推荐

vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
vue选中点击的元素_vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变, ...
vue中改变v-html元素样式
<div class="brand-article" v-html="content.article"></div> 实现样式: 设计图 ...
在vue中怎么写行内样式高_说说在 Vue.js 中如何绑定样式（class 或 style）
在数据绑定中,最常见就是动态绑定元素的 class 或内联样式 style 咯,它们也是 HTML 的属性,所以可以使用 v-bind 指令 . 1 绑定 class 1.1 对象语法使用 v-bi ...
Vue中关于scoped以及scoped样式穿透的原理与使用详解
1. scoped 当多个组件中有相同的元素或相同的类名时,在其中一个组件中更改该元素的样式,会导致所有组件中的样式更改,造成样式污染,若只想该样式在当前组件生效就需要用到scoped 示例组件de ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
vue中组件之间传值的六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B ...
Vue中组件之间8中通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
vue中组件在不同页面中渲染出错
vue中组件在不同页面中渲染出错封装了一个组件封装了一个组件遇到问题了,特向各位大佬请教比如我封装了一个 child 组件我在father 页面中引入可以正常使用而且css 样式不会出现 ...
vue中怎么获取元素
vue中怎么获取元素在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el: ...

vue中组件根元素添加样式无效

vue中组件根元素添加样式无效相关推荐

最新文章

热门文章