vue2选项式
<template><div><el-rowclass="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-rowclass="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-tipsclass="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>
- 使用 defineComponent 包裹，开启更好的类型推导。
- Vue 3 中 v-model 的默认 prop 为 modelValue，默认事件为 update:modelValue；如果你仍然想用自定义名称（如 restoreDefaultParameters），就需要在父组件写成 v-model:restoreDefaultParameters，子组件用 prop:restoreDefaultParameters 和事件 update:restoreDefaultParameters。
- 在选项式 API 中，通过 emits: [‘update:restoreDefaultParameters’] 显式声明要触发的事件。
第二种写法：
<template><div><el-rowclass="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-tipsclass="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" />
)
