Vue 反应式表单组件通信

Question

我有多个表单组件，每个表单都是一个组件。现在，我想使用相同的组件来添加数据和编辑数据。所以我想做的是，当 Post 组件收到一个包含数据的道具时，这意味着它处于“编辑模式”并用其数据填充字段，如果不是，它处于“创建模式”。 那么我应该如何在我的表单域中使用 v-model 呢？

我是否应该将每个表单字段 v-model 为一个计算属性（它有一个 getter 和一个 setter），并且计算属性会检查 data 属性是否为空，如果不使用它的数据来填充字段？并在计算属性set方法中更新prop？

父组件

<post :data.sync="dataObject"></post>

子（帖子）组件

<template>
  <div>
    <form>
      <input type="text" label="title" v-model="computedTitle" />
      <input type="text" label="message" v-model="computedMessage" />
    </form>
  </div>
  <input type="button" @click="submitted"
<template>

<script>
export default {
  data(){
    return{
       post:{
         title:null,
         message:null
       }
    }
   },
  props:["data"],
  computed:{
     computedTitle:{
          get(){
             return data ? data.title : ''
          },
          set(computedTitle){
             computedTitle = computedTitle // trying to update computed property value with the field value...
          }
     },
     computedMessage:{...}
  }
}
</script>

Answer 1

您可以使用watch 来检查data 属性，如果已设置则设置为本地post 变量。

• 如果已创建，则 data 为 null，post.title 和 post.message 设置为 null
• 如果更新，则data 不为空，post.title 设置为data.title，post.message 设置为data.message

    <template>
      <div>
        <form>
          <input type="text" label="title" v-model="post.title" />
          <input type="text" label="message" v-model="post.message" />
        </form>
      </div>
      <input type="button" @click="submitted"
    <template>

    <script>
    export default {
      data() {
        return{
           post: {
             title: null,
             message: null
           }
        }
       },
      props:["data"],
      watch: {
        data: {
          handler(newData) {
            if (newData) {
              this.post = {
                title: newData.title,
                message: newData.message
              }
            }
          },
          immediate: true // this makes watch is called when component created
        }
      }
    }
    </script>

请注意，您应该使用immediate: true 在创建组件时调用手表的函数