vue自定义组件model模式的使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。（借用官网）

实现效果

父组件调用

假如这是个动态的form表单，可以通过传递数组对象参数的形式动态的生成表单
<template>
  <div>
    {{ formData }}
    <acc-Form v-model="formData" class="mt-10"></acc-Form>
  </div>
</template>

<script>
//在此引入组件，我这边是全局组件，就不做引入了
export default {
  data () {
    return {
      formData: {

      }
    }
  }
}
</script>

子组件实现

<template>
  <div>
    <el-input v-model="formData.inputVal"></el-input>
    <el-input
      type="textarea"
      class="mt-10"
      v-model="formData.textareaVal"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'AccForm',
  //父组件通过v-model传递参数的配置
  //prop是你在子组件定义接收的参数
  // event 是如果想在methods修改参数时使用 （比如：this.$emit('changed',val))
  model: {
    prop: 'formData',
    event: 'chenged'
  },
  props: {
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>

<style>
</style>