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