Vue高级特性之自定义v-model

前言：日常开发中，除了直接在input标签上使用v-model指令外，封装的组件也需要v-model，接下来看看如何在Vue组件中使用自定义v-model

• home.vue

<template>
  <div class="home-box">
    <category v-model="categoryValue" @customChange="onChange"/>
  </div>
</template>

import category from "./category.vue"

• 组件

<a-select style="width: 120px" @change="handleChange" :value="params">  // 这里使用value或者v-model都可以
      <a-select-option v-for="item in list" :value="item.val" :key="item.val">
        {{ item.label }}</a-select-option
      >
   </a-select>

export default {
  model: {
  // 要和prop里接收的参数对应
    prop: "params",
   // 随便命名事件，对应下面$emit即可
    event: "customChange",
  },
  prop: {
    params: {
      type: String,
      default: "",
    },
  },
}

  handleChange(value) {
          this.$emit('customChange',value)
      }

这里的model是组件里的关键属性，model里定义的prop属性值，要和prop里接收的参数值相对应，然后在进行事件操作时，将event里事件$emit即可。这样就可以使用自定义的v-model了

完整代码

<template>
  <div class="home-box">
    <category v-model="categoryValue" @customChange="onChange"/>
  </div>
</template>

<script>
import category from "./category.vue"
export default {
  data() {
    return {
      categoryValue:''
    };
  },
  components:{
    category
  },  
  methods: {
    onChange(value) {
      console.log(value, 'value')
    }
  },
};
</script>


// 子组件
<template>
  <div>
    <a-select style="width: 120px" @change="handleChange" :value="params">
      <a-select-option v-for="item in list" :value="item.val" :key="item.val">
        {{ item.label }}</a-select-option
      >
    </a-select>
  </div>
</template>

<script>
export default {
  model: {
    prop: "params",
    event: "customChange",
  },
  prop: {
    params: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [
        {
          label: "类目1",
          val: "1",
        },
        {
          label: "类目2",
          val: "2",
        },
      ],
    };
  },
  methods: {
      handleChange(value) {
          this.$emit('customChange',value)
      }
  }
};
</script>