Input 带有v-model的Vue.js组件

我已经能够在定制组件上完成单级深度的v-model双向绑定，但需要更深一级

当前工作代码：

    <template lang="html">

      <div class="email-edit">

        <input ref="email" :value="value.email" @input="updateInput()"/>
<input ref="body" :value="value.body" @input="updateInput()"/>

      </div>

    </template>
    <script type="text/javascript">
      import LineEditor from './LineEditor.vue'
      export default {
        components: {
          LineEditor
        },
        computed: {
        },
        methods: {
          updateInput: function(){
            this.$emit('input',{
              email: this.$refs.email.value,
              body: this.$refs.body.value
            })
          }
        },
        data: function(){
          return {}
        },
        props: {
          value: {
            default: {
              email: "",
              body: ""
            },
            type:Object
          }
        }
      }
    </script>

从“./LineEditor.vue”导入LineEditor
导出默认值{
组成部分：{
线条编辑器
},
计算：{
},
方法：{
updateInput:function（）{
此.$emit（'input'{
电子邮件：此。$refs.email.value，
正文：此。$refs.body.value
})
}
},
数据：函数（）{
返回{}
},
道具：{
价值：{
默认值：{
电邮：“，
正文：“”
},
类型：对象
}
}
}

这样使用：

但是，如果我添加此片段，该值将不再向上传播：

      <div class="email-edit">

        <line-editor ref="email" :title="'Email'" :value="value.email" @input="updateInput()"/>
<input ref="body" :value="value.body" @input="updateInput()"/>

      </div>

    </template>
    <script type="text/javascript">
      import LineEditor from './LineEditor.vue'
      export default {
        components: {
          LineEditor
        },
        computed: {
        },
        methods: {
          updateInput: function(){
            this.$emit('input',{
              email: this.$refs.email.value,
              body: this.$refs.body.value
            })
          }
        },
        data: function(){
          return {}
        },
        props: {
          value: {
            default: {
              email: "",
              body: ""
            },
            type:Object
          }
        }
      }
    </script>

从“./LineEditor.vue”导入LineEditor
导出默认值{
组成部分：{
线条编辑器
},
计算：{
},
方法：{
updateInput:function（）{
此.$emit（'input'{
电子邮件：此。$refs.email.value，
正文：此。$refs.body.value
})
}
},
数据：函数（）{
返回{}
},
道具：{
价值：{
默认值：{
电邮：“，
正文：“”
},
类型：对象
}
}
}

使用第二个自定义组件：

<template lang="html">

  <div class="line-edit">
    <div class="line-edit__title">{{title}}</div>
    <input class="line-edit__input" ref="textInput" type="text" :value="value" @input="updateInput()" />
  </div>

</template>
<script type="text/javascript">
  export default {
    components: {
    },
    computed: {
    },
    methods: {
      updateInput: function(){
        this.$emit('input', this.$refs.textInput.value)
      }
    },
    data: function(){
      return {}
    },
    props: {
      title:{
        default:"",
        type:String
      },
      value: {
        default: "",
        type: String
      }
    }
  }
</script>

{{title}}
导出默认值{
组成部分：{
},
计算：{
},
方法：{
updateInput:function（）{
this.$emit（'input'，this.$refs.textInput.value）
}
},
数据：函数（）{
返回{}
},
道具：{
标题：{
默认值：“”，
类型：字符串
},
价值：{
默认值：“”，
类型：字符串
}
}
}

---

第一个代码块只需输入即可正常工作。但是，使用两个自定义组件似乎不会在两个组件中都出现气泡，而只是在LineEditor中。如何使这些值在所有自定义组件中冒泡，而不考虑嵌套？

在我的情况下，手动在两个组件上进行传递是不起作用的。但是，将我的第一个自定义组件替换为以下组件：

<line-editor ref="email" :title="'Email'" v-model="value.email"/>
<input ref="body" :value="value.body" @input="updateInput()"/>

---

在第一个组件中只使用v-model，然后允许第二个自定义组件向上发射，这就成功了。

我对代码进行了一些更新，以处理在组件上使用v-model的问题，这样您就可以向下传递值并备份树。我还向组件中添加了观察者，这样，如果您应该从电子邮件编辑器组件外部更新电子邮件对象值，更新将反映在组件中

console.clear（）
常量行编辑器={
模板：`
{{title}}
`,
观察：{
价值（新价值）{
this.email=newValue
}
},
数据：函数（）{
返回{
电子邮件：此为.value
}
},
道具：{
标题：{
默认值：“”，
类型：字符串
},
价值：{
默认值：“”，
类型：字符串
}
}
}
常量电子邮件编辑器={
组成部分：{
线条编辑器
},
模板：`
`,
观察：{
value（newValue）{console.log（newValue）
this.email=newValue.email
this.body=newValue.body
}
},
方法：{
updateInput:函数（值）{
此.$emit（'input'{
电子邮件：this.email，
身体：这个
})
},
},
数据：函数（）{
返回{
电子邮件：this.value.email，
body:this.value.body
}
},
道具：{
价值：{
默认值：{
电邮：“，
正文：“”
},
类型：对象
}
}
}
新Vue({
el:“应用程序”，
数据：{
电子邮件：{}
},
组成部分：{
电子邮件编辑
}
})

{{email}}
改变

这些似乎是一个更完整的解决方案。我已经将它添加到我的代码库中，并且它是有效的。我只是想确定我是否遵循了你的逻辑。道具传递给子级，子级使用观察程序捕获父级对道具的任何更改，并相应地调整其实例范围内的变量。实例范围变量data作为v-model用于输入，以维护用户编辑的内容，并通过输入时发射传递给父级。这包括你的逻辑链吗？@steventnorris你知道了。