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" />
)
