Vue 3 computed 里面set 更新 props 传递过来的对象属性,怎么改？

Question

  <van-popup
    id="popup"
    overlay-class="header-overlay"
    v-model:show="modal.visible"
    @click-overlay="closeModal"
  ></van-popup>

modal是通过props传递过来的报错了，unexceped mutation of modal prop 这种怎么改?

export default defineComponent({
  props: {
    modal: Object
  },

现在改成这种形式 changeShow 替换modal.visible,这里set 会有问题，set这里怎么改？

 const changeShow = computed({
      get() {
        console.log('xxxxxxxxxxxxxxxxxxxxxx', props.modal, props.modal.visible)
        return props.modal.visible
      },
      set(val) {
        console.log('zzzzzzzzzzzzzzzz', val)
        // props.modal.visible = val
        this.$emit('update:[modal.visible]', val)
      }
    })

Answer 1

OP还是做一个最小demo吧，你要修改props下来的参数，是要用 emit 来提交事件给父级，但是同样的你要在父级接收修改 props 的值，或者你在父级使用的时候不是通过 v-bind 绑定，而是使用 v-model 来处理。
但是这些在你的代码示例中并没有体现出来。能看到的就是你在你的自定义子组件中给 van-popup 绑定了 model.visible，并没有看到你在父级是如何给当前的自定义组件绑定 model 的。

Answer 2

父组件: <van-popup v-model:modal="modal"/>
子组件:
<script setup>
const props = defineProps({

modal: Object

})

const emit = definEmits(["update:modal"])

const visible = computed({

get(){
    return props.modal.visible
},
set(val){
    emit("update:modal", {...props.modal, visible: val})
}

})
</script>

Answer 3

你用 v-model 绑定的 是 show, 而非 modal , 所以你子组件定义的props modal 没用,
直接定义show就好了,定义modal 有什么用呢?

父组件:

  <van-popup v-model:show="modal.visible" />

子组件

export default defineComponent({
  props: {
    show: Boolean
  },

    computed({
      get() {
        console.log('xxxxxxxxxxxxxxxxxxxxxx', props.modal, props.modal.visible)
        return props.show
      },
      set(val) {
        console.log('zzzzzzzzzzzzzzzz', val)
        // props.modal.visible = val
        this.$emit('update:show', val)
      }
    })

上面的回答纯驴唇不对马嘴