vue3 - 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

你可以通过定义一个 updateModalVisible 方法来更新 modal.visible 的值。这个方法可以在组件内部定义，并在 set 函数中调用。

以下是一个示例代码：

export default defineComponent({  props: {    modal: Object  },  setup(props) {    const changeShow = computed({      get() {        return props.modal.visible;      },      set(val) {        props.updateModalVisible(val);      }    });    const updateModalVisible = (val) => {      props.modal.visible = val;    };    return { changeShow, updateModalVisible };  }});

在这个示例中，updateModalVisible 方法用于更新 modal.visible 的值。在 set 函数中，我们调用 updateModalVisible 方法并将新的值作为参数传递给它。这样就可以通过 Vue 3 的响应式系统更新 props 中传递的对象属性。