vue - 自定义组件的 v-model
vue - 自定义组件的 v-model
参考链接
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>
Lee2