zzlit

虽然有些观点不太认同，也许是因为眼界不够，但还是能受一点启发的。多读书啊。

正好借楼问一句 mocha 不借助 karma 如何才能有浏览器里面 window 的这个参数？就像这个[问答]( https://stackoverflow.com/questions/41194264/mocha-react-navigator-is-not-defined)我加了 jsdom 也还是不行

@jeeyong 笑死

@jiabinbin0115 你父组件的 obj 是不是 ref 定义的？我使用 ref 的可以，用 reactive 不行

@a516307724 我好像有点懂了，其实就是相当于我上面第二种方法里面 toRefs 把 obj 转化一下一样的道理，v-model 更新的对象的值，就是需要一个 xx.value?


```
// 父组件
<template>
<ComponentA v-model:a="a" v-model:b="b" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const obj = reactive({
a: 1,
b: 2
});
const { a, b } = toRefs(obj);
</script>
```

@joe237 多谢大佬解答，我知道 v-bind 可以用，但是我是想在 v-bind 上在实现原 vue2 中.sync 的作用。
其实我发现需要实现 1 主要问题在 2，之前一直以为 ref 是针对 string 或 number 这种基本的数据类型的，不能用于 object，结果一直弄错了，ref 会根据数据类型去判断，如果是 object 就会走 reactive 创建这个响应式对象，那么我如果要实现 v-bind.sync 的话其实有两种办法。
第一种：父组件里面直接用 ref 定义，我的想的是因为在模板上 obj.value 是被解绑的所以直接写 obj 就行了，然后 v-model 的语法糖其实就是更新 obj 的 value，所以直接用 ref 定义可以

```
// 父组件
<template>
<ComponentA v-model:obj="obj" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const obj = ref({
a: 1,
b: 2
});
</script>
```

第二种：这个就其实是自己手动拆开了，就是在子组件里面麻烦一点需要定义很多个 update:xxx

```
// 父组件
<template>
<ComponentA v-model:a="obj.a" v-model:b="obj.b" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const obj = reactive ({
a: 1,
b: 2
});
</script>
```
不知道我上面说的对不对
ps:目前用的是第一种，就是在如果需要在方法里面用的时候是写成 obj.value.a，看起来怪怪的...

@shakukansp 受教了