位置: IT常识 - 正文
Vue里父组件如何修改子组件样式(vue父组件如何调用子组件的方法组合式api)
发布时间：2024-01-17推荐整理分享Vue里父组件如何修改子组件样式(vue父组件如何调用子组件的方法组合式api)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue父组件如何通知子组件更新,vue父组件如何获取子组件的值,vue父组件如何调用子组件的方法,vue父组件如何知道子组件接口请求完,vue父组件如何向子组件中传递数据,vue父组件如何知道子组件接口请求完,vue父组件如何修改子组件的值,vue父组件如何向子组件中传递数据,内容如对您有帮助，希望把文章链接给更多的朋友！
在使用Vue开发过程中，我们有时会用到一些外部组件，如ElementUI、Vant等。
使用这些外部组件的过程中，你有没有遇到过这种情况：有时候我们需要对该组件的样式做一些调整，但在调用该组件的父页面怎样修改样式，都看不到变化。
这是为什么呢？
一般我们在Vue写style的时候，都会给<style>标签添加scoped属性，让css只作用域当前组件中的元素，避免了污染全局样式。
但是在父组件中添加scoped之后，父组件的样式将不会渗透到子组件中，所以在父组件中写子组件的样式是无效果的。
那么要如何做才能在父组件修改子组件的样式呢？
一、去掉scoped
去掉scoped之后，父组件中可以书写子组件的样式，当然，此时该组件中的样式就是全局样式了。
该方法不是特别推荐，正确的使用全局样式应该是使用一个全局的app.css。
二、混用本地和全局样式
可以在一个组件中同时使用有作用域和无作用域的样式：
<style>/*全局样式*/</style><style scoped>/*当前组件样式*/</style>将需要修改子组件的样式写正在上面那个全局样式里面。
三、使用深度作用选择器
如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以用 >>> 操作符：
<style scoped>.parent >>> .child { /* ... */}</style>有些像SASS之类的预处理器无法正确解析 >>>，这种情况下我们可以用 /deep/ 操作符替换：
<style scoped>.parent /deep/ .child { /* ... */}</style>上一篇：深度学习中正样本、负样本、简单样本、困难样本的区别 （简单易懂）
