具有v模型的Vue.js组件

Question

我已经能够在自定义组件上完成一个v模型双向绑定的单一层次深度，但需要将其提高一个层次。

现行工作守则：

    <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>

像这样使用：<email-edit-input v-model="emailModel" />

但是，如果我添加此部分，则该值将不再向上传播：

​

      <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>

使用第二个自定义组件：

<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>

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

Answer 1

在我的例子中，手动完成两个组件的通入操作都不起作用。但是，用这个替换我的第一个自定义组件：

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

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