这是一个创建于 1229 天前的主题，其中的信息可能已经有所发展或是发生改变。
<template> <div></div> </template> <script setup> const emit = defineEmits(["update:modelValue"]); const props = defineProps({ modelValue: { type: Array, defualt: [], }, }); watch( () => props.modelValue, () => { // 一些操作 }, { immediate: true, } ); </script> 有没有办法，如果组件内部 emit 改变 modelValue 的值不触发组件内部 watch 监听,只有在父组件改变了传入的值才触发组件内部 watch 监听
13 条回复 2022-08-28 01:57:38 +08:00
 | 1 dingjs 2022-08-15 09:38:05 +08:00 不行，watch 的是 props ，只要改变必定会触发监听函数。 简单点的办法是可以存个变量，emit 的时候更新，监听函数中判断一下值有没有变化 |
 | 3 ciming OP @dingjs 主要是因为外部传进来的数据和组件处理的数据有差异，需要处理转换下，那个转换函数还要去遍历树，如果每次 emit 都会触发 watch ，就会很耗费性能 |
 | 4 Highlight1024 2022-08-15 10:43:12 +08:00 有一个蠢一点的方法就是弄一个值来区分是不是父组件改变的值 |
 | 5 haobaiZhang 2022-08-15 11:36:18 +08:00 @ciming 组件内部用 computed ? emit 的时候, 只保持外部的数据结构? |
| 6 haobaiZhang 2022-08-15 11:37:09 +08:00 @haobaiZhang 哦哦, 有点问题, 没考虑 emit 不触发 watch |
 | 8 Vegetable 2022-08-15 15:27:12 +08:00 本质上你的 emit 并没有修改 modelValue,而是向上 emit ，modelValue 的变化永远是外部触发的，所以这个场景和你描述的是不符的。 比如你 emit("update:modelValue",1)，但是外部可能是 @update:modelValue=(val)={value=val+1} 如果用这种需求，不建议搞太复杂，弄两个方法算了 |
 | 9 lin07hui 2022-08-15 17:18:20 +08:00 以后使用 `<script setup lang="ts">` 吧。 |
 | 10 joesonw 2022-08-15 18:32:06 +08:00 via iPhone view 不要直接使用 props ，用一个 state 存，watch props 后存到 state 上 |
 | 11 gausszhou 2022-08-16 08:34:40 +08:00 个人倾向于在组件外层，在接口回调中，进行数据结构的转换。 获取数据--> 前置处理-->双向绑定--> (用户操作-->后置处理) --> 提交数据 |
 | 12 zhuweiyou 2022-08-16 12:13:11 +08:00 一般来说, 调用者传入的值应该符合组件的需求, 而不是组件去迎合调用者. 这种情况我一般是在父上转换好格式再传给子组件用. |
 | 13 chenjiangui998 2022-08-28 01:57:38 +08:00 这项目没开 lint? modelValue: { type: Array, defualt:() => [], }, 多实例共享 modelValue 了 |
Select Language