简洁地链接V型模型?

Let below code be Child, it is embedded in its Parent, and has a NestedChild which finally features a <input> or <textarea>.

现在,下面的代码将不起作用。父级重新渲染并更新值属性,因此结果只是最后键入的字母。

// Child.vue
<script lang='coffee'>
  export default
    props: ['value']
    computed:
      edit:
        get: -> @value
        set: (e) -> @$emit 'input', e
    # ...
</script>

<template lang='pug'>
  div
    NestedChild( v-model='edit' )
    //- ...
</template>

相反,文本需要存储在代理变量中。

...

data: -> proxy: ''
computed:
  edit:
    get: -> @proxy = @value
    set: (e) -> @$emit 'input', @proxy = e
...

它适用于NestedChild-> Child,或Child-> Parent,但不适用于Nested-> Parent,其中Parent最终将其存储在Vuex,磁盘等中。该值不会在Parent中更新。

Simple way to make it work is to pass a propName prop to Child which then directly updates relevant data in Vuex by propName, aka by not using v-model at all. But that

  • a) smells real bad for my use case - where Parent reads data (from disk eg.) and determines which Children to display (through component :is)
  • b) is pointless for NestedChildren which in the end contain <input>
  • c) overall harder in dev stage

因此,实际上仅解决了Child的问题,而不是Parent-> Child-> NestChild1-> NestChild2-> ...-> input的问题

那么,如何简洁地链接v模型?谢谢。