vue3 computed后的值不能直接修改

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>

子组件：

<template>
<div class="" @click="onClick">点击</div>
</template>

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

// 点击
const onClickIsCollapse = () => {
  isCollapse.value = !isCollapse.value    //提示：Write operation failed: computed value is readonly
}
</sript>

子组件从父组件获取props，并computed后，点击事件进行取反，但是不能直接对isCollapse进行操作，一般是如何处理的？

Answer 1

父组件：

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

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

子组件:

<template>
<div class="" @click="onClick">点击</div>
</template>

<script setup>
const props = defineProps({
  isCollapse: {type: Boolean, required: true}
})
const emits = defineEmits(['update:isCollapse'])
const computedIsCollapse = computed({
    get: () => {
       return props.isCollapse
   },
   set: (newVal) => {
      emits('update:isCollapse', newVal)
   }
})

// 点击
const onClickIsCollapse = () => {
  computedIsCollapse.value = !computedIsCollapse.value
}
</sript>

Answer 2

一般而言几个方案：

1. 对于这种纯 UI 的属性，比如 isCollapse，isOpen 等，可以在本地放一个高优先级的 isLocalCollapse，用来继承传入的 props 并提供本地修改
2. 使用 watch，当父元素变化时，本地也变化
3. 使用 v-model:{prop} 修改父元素属性