vue - 自定义组件的 v-model

vue - 自定义组件的 v-model

参考链接

vuejs
vuejs api

model

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

类型

{ prop?: string, event?: string }

example

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>
<!-- 上述代码相当于： -->
<my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

component use

<template>
  <el-form-item label="序号" prop="xuhao" :rules="rules">
    <div class="order_number">
      <el-input
        v-model="value[0]"
        :min="min"
        :max="max"
        type="number"
        class="order_input"
        :placeholder="orderPlaceholder"
        @change="$emit('change', value)"
      />
      -
      <el-input
        v-model="value[1]"
        :min="min"
        :max="max"
        type="number"
        class="order_input"
        :placeholder="orderPlaceholder"
        @change="$emit('change', value)"
      />
    </div>
  </el-form-item>
</template>

<script>
import { validXuhao } from '../validator';
export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Array,
      default: () => [1, 0],
    },
    orderPlaceholder: {
      type: String,
      default: '请输入',
    },
    min: {
      type: Number,
      default: 1,
    },
    max: {
      type: Number,
      default: 1,
    },
  },
  data() {
    let validXuhaoM = validXuhao.bind(this);
    return {
      rules: { validator: validXuhaoM, trigger: 'blur' },
    };
  },
};
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/dialog';
</style>

    <el-form
      class="dialog_form"
      ref="tipsForm"
      :model="formData"
      :rules="formRules"
      :label-width="labelWidth"
    >
      <xuhao v-model="formData.xuhao" :min="min" :max="max" />
    </el-form>