Nuxt.js中如何将v-model绑定属性传递给<Nuxt>子组件

Vue默认的provide/inject机制本身不支持基础类型值的响应式传递：你在provide中直接返回{myprop: this.myprop}时，因为myprop是字符串（基础类型），相当于仅把初始化的静态值拷贝传递给了后代组件，后续父组件myprop更新时，provide出去的值不会同步更新，所以子组件拿到的始终是初始值。

方案1：传递响应式对象（推荐，兼容性最好） #

把要传递的属性包裹在响应式对象中，后代组件拿到的是对象引用，内部属性变更会同步触发响应：

修改~/layouts/default.vue代码： #

<template>
<div>
    <input v-model="state.myprop" />
    <span>{{state.myprop}}</span>
    <Nuxt />
    </div>
</template>

<script>
export default {
  provide: function () {
    // 直接传递整个响应式对象
    return { rootState: this.state };
  },
  data: () => ({
    state: {
      myprop: 'hello galaxy',
    }
  }),
}
</script>

修改~/pages/index.vue代码： #

<template>
  <div>My Prop is: {{rootState.myprop}}</div>
</template>

<script>
export default {
  inject: ["rootState"]
}
</script>

方案2：传递getter函数 #

如果不想修改原有数据结构，可以传递一个返回当前属性值的函数，子组件调用即可拿到最新值：

修改~/layouts/default.vue代码： #

<script>
export default {
  provide: function () {
    return { getMyprop: () => this.myprop };
  },
  data: () => ({
    myprop: 'hello galaxy',
  }),
}
</script>

修改~/pages/index.vue代码： #

<template>
  <div>My Prop is: {{getMyprop()}}</div>
</template>

<script>
export default {
  inject: ["getMyprop"]
}
</script>

方案3：Nuxt3专属方案 #

如果你使用的是Nuxt3，可以直接用全局状态方法useState代替provide/inject，天然跨组件响应，不需要额外处理依赖：在布局和页面中都声明const myprop = useState('myprop', () => 'hello galaxy')即可实现双向同步。

内容的提问来源于stack exchange，提问作者learningtech