v-model绑定属性到自定义组件

在Vue中，通过:v-model绑定一个属性到自定义组件上，实际上是利用了Vue的v-model语法糖，它本质上是实现了组件内部的value prop 和 input 事件的一个组合。当你在父组件中这样使用自定义组件时：

<SelectOfficeListModal :is-under="1" v-model="plan.useOffice" 
:config="useOfficeConfig"/>

这意味着你希望在SelectOfficeListModal组件内部能够：

• 接收外部的值：通过value prop（Vue 3中推荐使用modelValue作为prop名称，但在Vue 2中通常直接使用value）接收来自plan.useOffice的值。
• 更新外部的值：当组件内部的值发生变化时，应该触发一个名为input的事件，并将新值作为事件参数传递出去，以便父组件可以接收到并更新其绑定的plan.useOffice。

为了使你的SelectOfficeListModal组件能够正确响应v-model，你需要在组件内部做以下处理：

组件内部示例（Vue 2）

// SelectOfficeListModal.vue
export default {
  props: ['value', 'isUnder', 'config'], // Vue 2中使用'value'作为默认的v-model绑定属性
  methods: {
    handleChange(newValue) {
      this.$emit('input', newValue); // 当值变化时，触发input事件，传递新值
    },
  },
  // ...
}

组件内部示例（Vue 3）

Vue 3中推荐使用modelValue作为默认的v-model绑定属性，并使用update:modelValue来触发更新

// SelectOfficeListModal.vue
export default {
  props: {
    modelValue: {
      type: [String, Number], // 根据实际类型定义
      required: true,
    },
    isUnder: {
      type: Number,
      default: 0,
    },
    config: Object,
  },
  emits: ['update:modelValue'], // 声明会触发的自定义事件
  methods: {
    handleChange(newValue) {
      this.$emit('update:modelValue', newValue); // 触发更新事件
    },
  },
  // ...
}

确保在你的组件内部处理好这些逻辑，这样父组件就可以通过v-model无缝地与你的自定义组件进行双向数据绑定。