Vue中自定义组件的v-model总结

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.实际效果