vue2升级vue3中v-model的写法改造

vue2选项式

<template>
  <div>
    <el-row
      class="group-title"
      :title="$t('restore_default_parameters')"
    >{{ $t('restore_default_parameters') }}</el-row>
    <el-form-item :label="$t('restore_default_parameters')" class="restore-container">
      <el-checkbox
        :checked="restoreDefaultParameters"
        @change="val => $emit('restoreDefaultParameters', val)"
      ></el-checkbox>

      <form-tips class="restore-tips" :tips="[{msg: $t('restore_params_tip')}]" />
      
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "RestoreDefaultParameters",
  components: {
    
  },
  model: {
    prop: "restoreDefaultParameters",
    event: "restoreDefaultParameters"
  },
  props: {
    restoreDefaultParameters: {
      required: true,
      type: Boolean,
      default: false
    }
  }
};
</script>

vue3 选项式

第一种写法：

<template>
  <div>
    <el-row
      class="group-title"
      :title="$t('restore_default_parameters')"
    >{{ $t('restore_default_parameters') }}</el-row>

    <el-form-item :label="$t('restore_default_parameters')" class="restore-container">
      <el-checkbox
        :model-value="restoreDefaultParameters"
        @change="val => $emit('update:restoreDefaultParameters', val)"
      ></el-checkbox>

      <form-tips
        class="restore-tips"
        :tips="[{ msg: $t('restore_params_tip') }]"
      />
    </el-form-item>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'RestoreDefaultParameters',

  props: {
    restoreDefaultParameters: {
      type: Boolean,
      required: true,
      default: false
    }
  },

  emits: ['update:restoreDefaultParameters']
})
</script>

1. 使用 defineComponent 包裹，开启更好的类型推导。
2. Vue 3 中 v-model 的默认 prop 为 modelValue，默认事件为 update:modelValue；如果你仍然想用自定义名称（如 restoreDefaultParameters），就需要在父组件写成 v-model:restoreDefaultParameters，子组件用 prop:restoreDefaultParameters 和事件 update:restoreDefaultParameters。
3. 在选项式 API 中，通过 emits: [‘update:restoreDefaultParameters’] 显式声明要触发的事件。

第二种写法：

<template>
  <div>
    <el-row
      class="group-title"
      :title="$t('restore_default_parameters')"
    >
      {{ $t('restore_default_parameters') }}
    </el-row>

    <el-form-item :label="$t('restore_default_parameters')" class="restore-container">
      <!-- 使用 modelValue + update:modelValue 的标准写法 -->
      <el-checkbox
        :model-value="modelValue"
        @change="val => $emit('update:modelValue', val)"
      />

      <form-tips
        class="restore-tips"
        :tips="[{ msg: $t('restore_params_tip') }]"
      />
    </el-form-item>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'RestoreDefaultParameters',

  props: {
    modelValue: {
      type: Boolean,
      required: true,
      default: false
    }
  },

  emits: ['update:modelValue']
})
</script>

使用方式（父组件）

<RestoreDefaultParameters v-model="someBoolean" />