链式 v-model 简洁？答案

【问题标题】：Chain v-model succintly?链式 v-model 简洁？
【发布时间】：2020-09-09 06:17:46
【问题描述】：

让下面的代码为 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 读取数据（例如从磁盘）并确定要显示哪些子项（通过 component :is）
b) 对于最终包含 <input> 的 NestedChildren 毫无意义
c) 在开发阶段总体上更难

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

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

【问题讨论】：

如果我理解正确，您希望事件通过几个子组件向上“冒泡”直到到达某个父组件？
是的。显然我不再有问题的一部分，但我不知道为什么。无需代理价值... ?? :')

标签： vue.js coffeescript v-model

【解决方案1】：

因此，无需在单独的数据变量中代理值。问题中的原始代码 sn-p 应该可以工作，它会冒泡到父母和父母的父母等。

这里又是代码，只转换成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>

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

【讨论】：