Vue里面的v-model实现了数据的双向绑定，使用起来非常地方便，官方给出了自定义组件的v-model的实现方式，今天自己再进行总结一下。
一、v-model的实际意义
#使用input输入框打比方
<input type="text" v-model="inputValue" />
#相当于：
<input type="text" :value="inputValue" @input="inputValue = $event.target.value" />
二、通过model配置实现v-model的prop属性与event事件的自定义
#例如这样定义：
model: {
prop: "value",
event: "change"
},
#实际上就相当于自定义组件
<custom-comp v-model="inputValue" />
#相当于
<custom-comp :value="inputValue" @change="inputValue" />
三、实际例子（封装一个分类筛选组件）
1.组件实现代码
<template>
<div class="sort-filter-wrap" v-if="sortList.length">
<div
v-for="(item, index) in sortList"
class="item-type"
:class="{ 'item-type-selected': item[format.key] === currentKey }"
:key="index"
@click="selectSort(item[format.key])"
>
{{ item[format.title] }}
</div>
</div>
</template>
<script>
export default {
//分类筛选组件
name: "sortFilter",
//定义实现v-modal的属性与事件
model: {
prop: "value",
event: "change"
},
props: {
//绑定的值
value: {
type: [String, Number],
default: ""
},
//格式
format: {
type: Object,
default() {
return {
key: "type",
title: "title"
};
}
},
//分类列表
sortList: {
type: Array,
default: []
}
},
data() {
return {
//当前选择的key值
currentKey: ""
};
},
watch: {
//监听用户的值
value(newValue) {
this.currentKey = newValue;
}
},
//创建组件的时候设置默认值
created() {
this.currentKey = this.value;
},
methods: {
//选择分类
selectSort(value) {
#1.此处发送change事件是为了事先v-model，
#2.父组件会自动将监听接收到的值赋值给父组件定义的变量
#3.在父组件也可以“显示地”监听change事件做一些额外的处理操作
this.$emit("change", value);
}
}
};
</script>
<style lang="scss" scoped>
.sort-filter-wrap {
display: flex;
align-items: center;
.item-type {
min-width: 68px;
height: 24px;
border-radius: 12px;
text-align: center;
line-height: 24px;
color: #515a6e;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
margin-right: 5px;
cursor: pointer;
padding: 0px 12px;
}
.item-type-selected,
.item-type:hover {
border: 1px solid rgba(71, 152, 255, 0.3);
background: rgba(24, 144, 255, 0.1);
color: #4798ff;
}
}
</style>
2.在父组件使用该组件
<template>
<yd-sortfilter
v-model="filterParams.state"
:format="{ key: 'state', title: 'title' }"
:sort-list="stateList"
/>
</template>
<script>
//导入分类筛选组件
import sortFilterManage from "@components/tools/sortfilter";
export default {
components: {
sortFilterManage
},
data() {
return {
//筛选参数
filterParams:{
state:''
},
//状态列表
stateList:[
{
state: "",
title: "全部"
},
{
state: 1,
title: "待审核"
},
{
state: 2,
title: "已发布"
},
{
state: 3,
title: "已打回"
}
]
}
}
}
</script>
3.实际效果
效果
