85 lines
2.2 KiB
Markdown
85 lines
2.2 KiB
Markdown
# 与vue项目相关，其实也不止vue，js之类的都算其中.
|
|
|
|
|
|
---
|
|
# 子子组件之间的通信可以通过事件总线（eventBus）实现
|
|
---
|
|
# doucument.createElement出来的东西不及时销毁就会一直游离在外面不被释放，积累下来很不好。
|
|
|
|
|
|
---
|
|
# 组件的设计
|
|
组件设计可以分成业务组件，展示组件，展示组件只负责以对应的形式展示对应的数据，对于业务的处理（如增删查改），则需要通过emit或其他方法交给业务组件处理
|
|
|
|
---
|
|
# 路由返回拦截hook
|
|
* 当点击返回键（浏览器或者是页面上的路由返回功能）时触发，形式如下：
|
|
```ts
|
|
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:
|
|
```scss
|
|
<style lang="scss">
|
|
.replay-result-card-pop-class {
|
|
.result-card-share {
|
|
...
|
|
.result-card-share-text {
|
|
...
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
* 组件：
|
|
```html
|
|
<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>
|
|
``` |