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

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

• home.vue

import category from "./category.vue"

• 组件

  // 这里使用value或者v-model都可以
      
        {{ item.label }}
   

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了

完整代码

// 子组件