Vue 3 Composition API：当值从父组件更新时动态更新子组件道具

Question

当来自父组件的数据更新并通过 prop 时，我正在尝试更新 prop 值。当我向下传递父值时，父值总是更新但不会在子组件中更新或重新呈现。它在第一次访问子组件时传递给 prop，但在父组件中更新数据时不传递。

下面是父组件：

<script setup>
import { inject, watchEffect, ref } from "vue";
import ChildComponent from "@/components/ChildComponent.vue"
const { state } = inject("store");
const cart = ref(state.cart);

watchEffect(() => (cart.value = state.cart));

</script>
<template>
  <ChildComponent
   v-for="(item, index) in cart?.items"
   :key="index"
   :cartItem="item"
  />
</template>

下面是子组件（只在第一次加载时登录，不再加载）：

<script setup>
import { ref, watchEffect } from "vue";

const { cartItem } = defineProps({
  cartItem: !Object
});

const item = ref(cartItem);

watchEffect(() => {
  console.log(item.value)
});
    
</script>

我尝试过以多种方式使用 Watch，但它无法检测到旧值或新值。它不记录任何输出

使用 watch 的示例子组件：

<script setup>
import { ref, watch } from "vue";

const { cartItem } = defineProps({
  cartItem: !Object
});

const item = ref(cartItem);

watch(() => item.value, (oldValue, newValue) => {
  console.log(oldValue)
  console.log(newValue)
});
        
</script>

Answer 1

我遇到了同样的问题，这很令人沮丧，有时我不得不做一个解决方法来获得我需要的东西，但是在 子组件:

<script>
import { ref, watch } from "vue";

export default {
props: {
 cartItem: {
  type: !Object,
 },
},

setup(props) {
 const item = ref(null);

 watch(props, () => {
  item.value = props.cartItem;
 });

 return { item }
}
</script>

Answer 2

我最终通过使用 v-if 重新渲染子组件解决了这个问题。

<script setup>
import { inject, watchEffect, ref } from "vue";
import ChildComponent from "@/components/ChildComponent.vue"
const { state } = inject("store");
const cart = ref(state.cart);
const render = ref(true);

// Checks when the cart changes from the store
watchEffect(() => {
  if(cart.value) {
    render.value = true
  }
  else {
    render.value = true
  }
};

</script>
<template>
<div v-if="render">
  <ChildComponent
   v-for="(item, index) in cart?.items"
   :key="index"
   :cartItem="item"
  />
</div>
</template>

Vue 3 Composition API：当值从父组件更新时动态更新子组件道具

Vue 3 Composition API: Update Child components props dynamically when values update from the parent component

vue-props

vuejs3

vue-composition-api