Vue3——defineOptions和defineModel

1.出现背景2.defineOptions2.1 作用当使用setup语法糖后它把很多东西都隐藏起来了让你不需要手动写export default(Vue2)或者setup()原生函数但是其它组件选项对象需要export default存在才能添加。defineOptions用于在单文件组件SFC中声明组件选项。2.2 示例2.2.1Vue2中的写法设置一些组件级别的选项(name、inheritAttrs...)script export default { name: MyComponent, inheritAttrs: false, } /script script setup // 逻辑代码 /script2.2.2 Vue3中的写法使用defineOptionsscript setup defineOptions({ name: MyComponent, inheritAttrs: false, }) /script script setup // 这是错误的写法 name: MyComponent, inheritAttrs: false, /script3.defineModel3.1 作用组件在使用v-model绑定时子组件只需要使用defineModel既可直接在子组件中双向修改用来简化组件v-model双向绑定的代码。3.2 示例3.2.1 传统写法子组件props手动接收父组件传递过来的数据然后通过emit再将数据传递回去。script setup const props defineProps([modelValue]) const emit defineEmits([update:modelValue]) /script template input :valueprops.modelValue inputemit(update:modelValue, $event.target.value) / /template !-- 父组件 -- Child v-modeltext /3.2.2 使用defineModelscript setup const modelValue defineModel() // 自动生成 prop emit这是一个ref /script template input v-modelmodelValue / !-- 即可像使用本地变量一样使用modelValue -- /template