vue.js 在父组件中传递computedRef时,变量在可组合中不可React

izj3ouym  于 2023-03-13  发布在  Vue.js
关注(0)|答案(2)|浏览(127)

我的问题可以在这里复制
说明:我有多层组件:应用程序版本-〉子公司版本-〉孙公司版本
我正在尝试传递一个对象和一个原始的层次结构,并保持它的React性。测试React性与按钮切换布尔基元的值。
Reactivity很好地保留在组件中,但当我将其传递给可组合对象时,情况就不同了。当我将测试原语传递给ChildComp.vue中的可组合对象时,使用toRef reactivity可以工作,但当我将测试原语传递给这次在GrandChildComp.vue中创建的可组合对象时,reactivity被破坏。
我知道不同之处在于primitive是作为prop传递给GrandChildComp.vue的, Package 在computedRef <GrandChildComp :mix="computedRef"/>中,但我不明白为什么必须传递给可组合对象computedRef以保持React性。当我传递 Package 在reactive对象中的primitive给GrandChildComp.vue时,<GrandChildComp :mix="props"/>React性这次仅使用toRef保持。
对不起,如果我的解释不清楚,我已经尝试添加评论内的例子,使它更清楚。

e3bfsja2

e3bfsja21#

问题是这个代码:

const ref = toRef(props.mix, "primitive")
useComposable("GrandChildComp ref", ref)

如果父进程传递了一个全新的mix值,则ref将指向一个过时的值。此语句只对最初传递的props.mix值起React。
与此相反:

const cref = computed(() => props.mix.primitive)
useComposable("GrandChildComp cref", cref)

该语句对props本身是React性的。
我认为用计算的裁判是你最好的选择。
顺便说一下,如果要将值传递给后代,可以使用injectprovide

wztqucjr

wztqucjr2#

你做的也太复杂了。这里是简化的工作证监会Playground
使用toRefs()

const { primitive, object} = toRefs(props);
useComposable("ChildComp primitive", primitive);
const mix = reactive({ primitive, object});

以及

const props = defineProps<Props>();
const { primitive, object } = toRefs( props.mix );
useComposable("GrandChildComp primitive", primitive)

或表示为computed()

const { primitive, object} = toRefs(props);
useComposable("ChildComp primitive", primitive);
const mix = computed(() => {
  return { primitive, object }
})

相关问题