Vue 响应式表单组件通信

Question

我有多个表单组件，每个表单作为一个组件。现在，我想使用相同的组件来添加数据和编辑数据。所以我想做的是当 Post 组件收到一个包含数据的道具时，这意味着它在 "editing mode" 中并用它的数据填充字段，如果不是，它在 "create mode". 那么我应该如何在表单域中使用 v-model 呢？

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

父组件

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

子（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 使手表的功能在创建组件时被调用

Vue 响应式表单组件通信

Vue reactive forms components communication

forms

vuejs2

components

communication