::v-deep 改为 :deep
时间: 2024-01-26 16:14:22 浏览: 173
deep
::v-deep 是 Vue.js 中的一个特殊选择器,用于在组件中修改子组件的样式。然而,从 Vue 2.6.0 版本开始,::v-deep 被废弃了,并且在 Vue 2.7.0 版本中被移除了。取而代之的是 :deep(.inner-selector) 选择器。
下面是一个示例,演示如何将 ::v-deep 改为 :deep:
```css
/* 使用 ::v-deep */
::v-deep .van-list__finished-text {
width: 100%;
}
/* 使用 :deep */
:deep(.van-list__finished-text) {
width: 100%;
}
```
请注意,:deep 选择器只能在全局样式中使用,而不能在 scoped 样式中使用。如果你的组件使用了 scoped 样式,你可以考虑使用其他方式来修改子组件的样式,例如使用 CSS 变量或者通过 props 传递样式。
阅读全文