defineModel use type object

[304541805]

When the value of defineModel is an object, assigning values to its properties individually results in the loss of reactivity. However, I need this two-way binding. Currently, this is how I am addressing the issue. Is there a better approach? Will nested property reactivity be supported in the future?

[Wei-Ba]

没有，你为什么不传的时候就直接v-model = "input.value"
要多个这样写不就好了

// child.vue
// script setup
...
const value = defineModel('value')
const count = defineModel('count')
// const ... = defineModel(...)
...

<script setup>
const data = reactive({value: 'abc', count: 4})
</script>
<template>
  <child v-model:value="data.value" v-model:count="data.count" />
</template>

---

以下全部不推荐:(
1.

// father.vue
<script setup>
const origin = reactive({ name: 'ww' })
const data = toRefs(origin)
</script>
<template>
   ...
   <child  v-model="data" />
   ...
</template>

// child.vue
<script setup>
...
const model = defineModel()
...
</script>
<template>
   ...
   <input v-model="model.name">
   ...
</template>

// father.vue
<script setup>
const origin = reactive({ name: 'ww' })
const data = reacitve({ origin })
</script>
<template>
   ...
   <child  v-model="data" />
   ...
</template>

// child.vue
<script setup>
...
const model = defineModel()
...
</script>
<template>
   ...
   <input v-model="model.origin.name">
   ...
</template>

3. 这个比上面的好一点:<

// father.vue
<script setup>
const data = ref({ name: 'ww' })
</script>
<template>
   ...
   <child  v-model="data" />
   ...
</template>

// child.vue
<script setup>
...
const model = defineModel()
const name = computed({
  get: () => model.value.name,
  set(val) =>model.value = { ...model.value, name: val }
})
...
</script>
<template>
   ...
   <input v-model="name">
   ...
</template>

[304541805]

我明白你的意思如果只有一两个我单独处理就好，但是我是子组件其实是个大表单form，我以为defineModel可以简洁一下，而且我发现原始input 只是失去响应式，我用element的input根本无法输入所以我放弃了，用个ref做转换了，谢谢你的回答