你提到的问题非常关键：
> **“打开了又关闭，再次点击时 `val` 一直是 `true`”**
并且你在父组件中打印了：
```js
const sendToParent = val => {
console.log('val', val); // 打印出来的 val 始终是 true
};
```
这说明：**子组件（RiskComp）每次点击都只
emit `true`，但从不
emit `false`。**
---
## 🚨 根本问题定位
### ❌ 当前逻辑缺陷
| 组件 | 行为 |
|
------|
------|
| `RiskComp` | 点击图标 → `$
emit('detail
-show', true)` ✅ |
| `AssetSafetyDetail` | 关闭时 → `
emits('update
:visible', false)` ✅ |
| `父组件` | 接收到 `true` → 显示；但没有监听 `update
:visible` 来接收 `false` ❌ |
➡️ 所以虽然子页面自己发出了 `update
:visible=false`，但**父组件不知道它被关闭了！**
于是：
- 第一次点击：`sendToParent(true)` → `showDetail = true` → 打开 ✅
- 关闭：子组件
emit `update
:visible=false`，但父组件没监听 → `showDetail` 仍是 `true`
- 再次点击：`sendToParent(true)` → `showDetail = true`（已经是 true）→ Vue 认为状态未变 → 不更新视图 ❌
👉 **结果就是：看起来“打不开”**
---
## ✅ 正确的通信闭环应该是：
```
[打开]
RiskComp
-- detail
-show=true
--> 父组件
-- v
-model
:visible=true
--> AssetSafetyDetail
[关闭]
AssetSafetyDetail
-- update
:visible=false
--> 父组件
-- showDetail=false
```
但现在缺少的是：**父组件必须监听 `update
:visible` 才能同步关闭状态**
---
## ✅ 解决方案：修复父子通信链路
### ✅ Step 1
: 修改父组件 —— 监听 `update
:visible`
你现在用了：
```vue
<AssetSafetyDetail v
-model
:visible="showDetail" />
```
这是语法糖，等价于：
```vue
<AssetSafetyDetail
:visible="showDetail"
@update
:visible="val => showDetail = val"
/>
```
✅ 这个已经自动处理了双向绑定，不需要手动写。
但是你还用了一个 `div` 包裹并加了 `v
-if="showDetail"`：
```vue
<div v
-if="showDetail" class="asset
-security
-detail
-body">
<AssetSafetyDetail v
-model
:visible="showDetail" />
</div>
```
这就导致了一个严重问题！
---
## ⚠️ 大坑：`v
-if` + `v
-model` 同时使用会导致状态丢失！
当你这样写：
```vue
<div v
-if="showDetail">
<AssetSafetyDetail v
-model
:visible="showDetail" />
</div>
```
会发生什么？
1. 点击打开 → `showDetail = true` → 渲染 `<AssetSafetyDetail />`
2. 关闭弹窗 → 子组件
emit `update
:visible=false` → `showDetail = false`
3. `showDetail = false` → 触发 `v
-if="false"` → 整个组件被销毁！
4. 下次再设为 `true` 时，组件重新创建 → 初始状态加载 → 看似正常
❌ 但这不是问题所在。
更大的问题是：
> 如果你在 `AssetSafetyDetail` 内部有表单、分页、缓存数据，它们都会因为 `v
-if` 销毁而丢失！
而且更重要的是：
> ❗️如果你在 `sendToParent(true)` 之前 `showDetail` 已经是 `true`，Vue 就不会重新渲染！
---
## ✅ 正确做法：去掉外层 `v
-if`，交给 `AssetSafetyDetail` 自己控制显隐
### ✅ 修改父组件模板
```vue
<teleport to="body">
<!
-- 去掉 v
-if，让 AssetSafetyDetail 自己决定是否显示
-->
<div
v
-show="showDetail && productRole.role[1] === 'amira.Infrastructure.assetSecurity'"
class="asset
-security
-detail
-body"
>
<AssetSafetyDetail v
-model
:visible="showDetail" />
</div>
</teleport>
```
或者更干净：
```vue
<teleport to="body">
<AssetSafetyDetail
v
-if="productRole.role[1] === 'amira.Infrastructure.assetSecurity'"
v
-model
:visible="showDetail"
/>
</teleport>
```
然后在 `AssetSafetyDetail` 内部使用 `<el
-dialog v
-model="visible">` 来控制显示。
---
### ✅ 确保 `AssetSafetyDetail` 支持 `visible` prop 和 `update
:visible`
```js
// AssetSafetyDetail.vue
const props = defineProps({
visible
: Boolean,
});
const
emits = define
Emits(['update
:visible']);
const handleClose = () => {
emits('update
:visible', false);
};
```
```vue
<el
-dialog v
-model="props.visible" @close="handleClose">
<!
-- 内容
-->
</el
-dialog>
```
或者直接：
```vue
<el
-dialog v
-model="props.visible">
<!
-- 内容
-->
</el
-dialog>
```
`v
-model` 会自动同步。
---
### ✅ 父组件无需额外监听，`v
-model` 自动同步
你现在的 `sendToParent` 函数其实可以简化：
```js
const sendToParent = (val) => {
console.log('open detail
:', val);
showDetail.value = val;
};
```
但实际上你可以直接：
```js
// RiskComp 发送 true 即可
@click="$
emit('detail
-show', true)"
```
父组件接收：
```js
const sendToParent = () => {
showDetail.value = true; // 只需要设置 true
};
```
而 `false` 是由 `v
-model` 自动从子组件同步回来的，**你不需要手动
emit false**
---
## ✅ 最终建议结构
### ✅ 父组件（简化版）
```vue
<t
emplate>
<div class="container">
<RiskComp @detail
-show="() => showDetail = true" />
<teleport to="body">
<AssetSafetyDetail
v
-if="hasPermission"
v
-model
:visible="showDetail"
/>
</teleport>
</div>
</t
emplate>
<scri
pt setup>
import { ref } from 'vue';
import { useProductRole } from '@/composables/useProductRole';
const productRole = useProductRole();
const hasPermission = computed(() => productRole.role[1] === 'amira.Infrastructure.assetSecurity');
const showDetail = ref(false);
</scri
pt>
```
### ✅ 子组件 `AssetSafetyDetail.vue`
```vue
<t
emplate>
<el
-dialog v
-model="innerVisible" title="资产安全明细" width="90%" @closed="onClosed">
<内部表格等内容 />
</el
-dialog>
</t
emplate>
<scri
pt setup>
const props = defineProps({ visible
: Boolean });
const
emit = define
Emits(['update
:visible']);
const innerVisible = computed({
get() { return props.visible; },
set(val) {
emit('update
:visible', val); }
});
const onClosed = () => {
// 可选：重置内部状态
};
</scri
pt>
```
---
## ✅ 验证流程
| 步骤 | 行为 | 是否触发更新 |
|
------|
------|
---------------|
| 1 | 点击 RiskComp | `showDetail = true` → 显示 ✅ |
| 2 | 点 × 或遮罩关闭 | `update
:visible=false` → `showDetail = false` ✅ |
| 3 | 再次点击按钮 | `showDetail = true` → 组件重新显示 ✅ |
此时无论之前是否已销毁，都能正确打开。
---
## ✅ 为什么你看到 `val` 总是 `true`？
因为：
- `RiskComp` 每次点击都
emit `true`
- 你只在 `@detail
-show` 里监听，所以只会收到 `true`
- 你没监听 `update
:visible`，所以收不到 `false`
- 但 `showDetail` 的 `false` 是通过 `v
-model` 自动更新的，不是来自 `sendToParent`
所以 `sendToParent` 只负责“打开”，不负责“关闭”
---
## ✅ 总结
| 问题 | 原因 | 解决方案 |
|
------|
------|
-----------|
| ❌ 第二次打不开 | `showDetail` 没被正确设回 `false` | 使用 `v
-model` 自动同步关闭状态 |
| ❌ `val` 总是 `true` | `sendToParent` 只接收 `true` | 正常现象，`false` 来自 `update
:visible` |
| ❌ 组件不重新渲染 | `v
-if` + `v
-model` 冲突 | 去掉外层 `v
-if`，或改用 `v
-show` |
---
本文详细介绍了em、px、pt、%在网页文本字体设置中的区别，强调了em和%在移动端可访问性方面的优势，并提供了将px转换为em和%的方法及注意事项，最后解释了em与百分比的换算关系及在实际应用中的影响。
扫一扫
2831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
