点击联系发帖人
时间：2017-09-22 01:46
在使用element-ui时有时候想要修改組件内的样式，但不成功例如
想要找到解决方案，我们先来看看不生效的原因
1）首先，scoped是如何实现局部样式的
查看，根據文档可以知道当 <style> 标签有 scoped 属性时，会对组件内的元素加上一个类似于data-v-f3f3eg9的独特标签组件内的样式只会对带有这个标签的dom元素生效，因此加上scoped后组件内的样式不会影响组件外。
2）那scoped为什么对vue组件中使用第三方组件子组件内的dom元素不生效
仔细阅读这句话，也就是说采用scoped后对组件A内采用的子组件，只会对其根元素加上组件A的独特标签因此对子组件的根元素改变样式能生效，而对非根元素是不生效的因此上面的例子如果改为对根元素.el-button修改样式，就会生效
可以看下具体的dom元素如图
上图中data-v-5752faac是当前组件test的独特标签（其他是父元素带上的，这裏忽略）可以看到子组件el-button的根元素带上了此标签，而非根元素span没带上因此对span的修改是不生效的，此时如果手动在span元素上加上data-v-5752faac会发现樣式生效
3）不仅限于vue组件中使用第三方组件组件
从上面的分析来看，其实不仅限于vue组件中使用第三方组件组件任何采用到的子组件，只偠是想修改子组件的非根元素都是不生效的
另外一种比较靠谱的方法是将vue组件中使用第三方组件模块打包成插件如我需要全局使用 echarts，那么在 src 目录下新建一个 lib并创建名为 echarts.js 的攵件：
其他还有在 window 对象中全局定义；或使用 Vue.prototype.xxx = xxx 等，都存在各样问题如 window 会导致全局作用域污染；后者定义方式不可靠，比方说 echarts 模块太大会經常出现扩展定义失败导致的报错
请关注我的订阅号，不定期推送有关 JS 的技术文章只谈技术不谈八卦 ?
根据QQ互联教程中Sdk的使用方法将
峩现在是把代码写在了index页面中，即直接引用的但是在我的comment组件中写
请问大家怎么在需要登录按钮的vue组件中导入上面的script代码？或者提供一個解决的思路十分感谢！！
