简洁地链接 v-model？

Question

让下面的代码成为 Child，它嵌入在它的 Parent 中，并且有一个 NestedChild，它最终具有 <input> 或 <textarea>。

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

// 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 中更新。

使其工作的简单方法是将 propName prop 传递给 Child，然后通过 propName 直接更新 Vuex 中的相关数据，也就是根本不使用 v-model。但是那个

a) 对我的用例来说真的很糟糕 - Parent 读取数据（例如从磁盘）并确定要显示哪些 Children（通过 component :is）
b) 对于最终包含 <input>
c) 在开发阶段总体上更难

因此实际上只解决了 Child 的问题，而没有解决 Parent -> Child -> NestChild1 -> NestChild2 -> ... -> input

那么，如何简洁地链接 v-model 呢？谢谢。

Answer 1

因此，无需在单独的数据变量中代理该值。问题中的原始代码片段应该可以工作，并且会冒泡到 parent 和 parent 的 parent 等

这里又是代码，只是转换成了javascript和html，而不是coffeescript和pug；否则与问题中的相同。

<template>
  <div>
    <NestedChild v-model='edit'>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    edit: {
      get: function()  { this.value },
      set: function(e) { this.$emit('input', e) }
    }
  }
    // ...
};
</script>

（决定留下问题，也许对某人有用）

简洁地链接 v-model？

Chain v-model succintly?

coffeescript

vue.js

v-model