Notebook-StarNet/aboutVUE3.md

与vue项目相关

---

路由返回拦截hook

• 当点击返回键（浏览器或者是页面上的路由返回功能）时触发，形式如下：

import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from, next) => {
  ...
  if (...) {
    ...do something
    next(false)
    return
  }
  ...
  next(true)
})

• 当next(false时，取消路由原有的返回功能)

---

具名作用域插槽

• 具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>

• 传入props

<slot name="header" message="hello"></slot>

• 是由插件传回父组件，如上面的message会被headerProps收到，可以根据此进行进一步的处理。

---

style相关

• 组件样式穿透中遇到需要修改样式的组件在组件外部的可以通过再创建一个<style>标签且不使用scope来实现。其中必须指定class防止样式污染。 example:

<style lang="scss">
.replay-result-card-pop-class {
  .result-card-share {
    ...
    .result-card-share-text {
      ...
    }
  }
}
</style>

• 组件：

<el-popover
  popper-class="replay-result-card-pop-class"
    >
  <template #default>
    <div class="result-card-share" ref="shareRef">
      <div class="result-card-share-qrcode">
      ...
      </div>
      <div class="result-card-share-text">扫码分享</div>
    </div>
  </template>
</el-popover>