vue父子组件双向数据绑定

需求

将房型封装成一个单独的子组件，用于：
1、新增时，生成父组件form所需的数据；
2、编辑时，子组件渲染父组件form传递的数据；

实现

父组件：

<el-form-item label="房型" prop="layout">
          <HouseLayout :layout.sync="houseForm.layout"></HouseLayout>
</el-form-item>

子组件：

<template>
  <div style="display: flex;flex-direction: row">
    <el-input style="margin-right: 5px" placeholder="请输入内容" v-model="input1" @change="changeLayout">
      <template slot="append">房</template>
    </el-input>
    <el-input style="margin-right: 5px" placeholder="请输入内容" v-model="input2" @change="changeLayout">
      <template slot="append">厅</template>
    </el-input>
    <el-input placeholder="请输入内容" v-model="input3" @change="changeLayout">
      <template slot="append">卫</template>
    </el-input>
  </div>
</template>

<script>
  export default {
    name: 'HouseLayout',
    props: {
      layout: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        input1: '',
        input2: '',
        input3: ''
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const layoutArr = this.layout.split('/')
        this.input1 = layoutArr[0]
        this.input2 = layoutArr[1]
        this.input3 = layoutArr[2]
      },
      changeLayout() {
        const layout = this.input1 + '/' + this.input2 + '/' + this.input3
        this.$emit('update:layout', layout)
      }
    }
  }
</script>

<style scoped>

</style>

核心

 <HouseLayout :layout.sync="houseForm.layout"></HouseLayout>
 <!-- 等价于 -->
 <HouseLayout :layout="houseForm.layout" @updata:layout="layout= $event"></HouseLayout>