Nuxt：父传子,将字段作为v-model异常

我们有个需求需要通过父级改变状态，来控制子组件的隐藏/显示。

一开始我们使用Nuxt子父传值参考：

但是在将传过来的值作为 v-model 时候，报错

v-model cannot be used on a prop, because local prop bindings are not writable。

这个错误原因其实很简单，因为该值不是双向绑定的，所以我们可以参考vue3最新语法可以达到这个需求参考组件 v-model | Vue.js

父组件：

<Child v-model="isShow" />

子组件：

<!-- Child.vue -->
<template>
  <div>Parent bound v-model is: {{ isShow}}</div>
</template>
<script setup>
    const isShow= defineModel()
</script>

这样就可以直接在子组件中使用 isShow 作为 v-model 

Vue自3.4版本以后，组件间数据双向绑定推荐使用defineModel()宏来实现，所以大家平时需要多关注下官方APIVue.js - 渐进式 JavaScript 框架 | Vue.js