补充内容 ​

深度作用选择器 ​

该场景常用于修改引入的组件的样式, 并保持 scoped 的性质

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

语法

• .xxx >>> .yyy: 用于 css
• .xxx /deep/ .yyy: 多层级存在问题(仅 chrome 有效，原因 chrome 自身支持 /deep/ ，但该特性已废弃)
• ::v-deep: vue3 中废弃
• :deep(.xxx): 目前的语法 (未找到文档)

说明

• 该文档为 webpack 中的 loader
• vite vue3 构建下核心机制转移到 @vue/compiler-sfc 中
• @vue/compiler-sfc 中已经不推荐 ::v-deep 的写法，改为 :deep(.xx-selector)

手动修改组件 props ​

一般通过修改组件传递的参数即可, 若需要通过代码实现可以参考以下内容

<template>
  <SomeComp ref="demoComp" somePropName="oldVal" />
</template>
<script setup>
  import { ref, onMounted } from "vue";
  const compInstance = ref();
  onMounted(() => {
    compInstance._.props["somePropName"] = "newVal";
  });
</script>