vue3父组件的值改变了，子组件props获取到的怎么不是最新的

Question

父组件：

<template>
  <button @click="click">改变状态</button>
    <el-aside width="200px">
      <Aside :isCollapse="isCollapse" />
    </el-aside>
</template>

<script setup>
const isCollapse = ref(false)
const click = () => {
  isCollapse.value = !isCollapse.value
}
</sript>

子组件：

<script>
const props = defineProps(["isCollapse"])
const isCollapse = ref(props.isCollapse)
</script>

问题：父组件的isCollapse的值改变了，但是子组件props的值还是第一次加载的值，如何能获取到最新的？用watch监听props外是可以的，但应该不会这么麻烦吧，每次都需要watch去监听

Answer 1

首先结论

• vue 是单向数据流，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值

• 题主获取不到最新值是写法问题

  获取方式

• 直接使用

  <template>
      <div>{{ isCollapse }}</div>
  </template>

• 通过computed

  <script setup>
    const props = defineProps({
      isCollapse: { type: Boolean, required: true },
    })
    const computedIsCollapse = computed(() => props.isCollapse)
  </script>
  <template>
    <div>{{ isCollapse }}</div>
    <div>{{ computedIsCollapse }}</div>
  </template>

Answer 2

isCollapse这个使用computed去接收props.isCollapse呢

Answer 3

子组件直接用isCollapse就行
如果父组件传递的是响应式数据 那么就可以直接用