Vue反应形成组件通信

Question

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

我应该将每个表单字段v建模为计算属性（具有getter和setter），并且计算属性将检查数据prop是否为空，如果不使用其数据填充字段？并在计算属性集方法中更新prop？

父组件

<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 prop，如果已设置然后设置为本地post变量。

• 如果创建，则data为null，post.title和post.message设置为null
• 如果更新，那么data不为null，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来创建创建组件时调用的监视功能