当前位置：首页 > news >正文

18 vue3之自动引入ref插件深入使用v-model

news 2025/7/5 1:57:45

自动引入插件后无需再引入ref等

使用自动引入插入无需在import { ref, reactive } from "vue"做这样的操作

npm i unplugin-auto-import - D

vite配置

import AutoImport from 'unplugin-auto-import/vite' //使用vite版本
export default defineConfig({plugins: [vue(),VueJsx(),AutoImport({imports:['vue'],dts:"src/auto-import.d.ts"})]
}

配置完成之后使用ref reactive watch 等无须import 导入可以直接使用

v-model

v-model使用场景

TIps 在Vue3 v-model 是破坏性更新的

v-model在组件里面也是很重要的

v-model 其实是一个语法糖通过props 和 emit组合而成的

默认值的改变

prop：value -> modelValue；
事件：input -> update:modelValue；
vue3中v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增支持多个v-model
新增支持自定义修饰符 Modifiers

单个v-model在自定义组件中使用场景

父组件


<template><div class=""></div><button @click="isShow = !isShow">开关</button><div>isShow:{{ isShow }}</div><hr /><!-- 内置修饰符 v-model.trim、自定义修饰符v-model:text.isSq  --><comv-model="isShow"></com>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import com from "./components/twenty.vue";
let isShow = ref<boolean>(true);
let textVal = ref<string>("你好");
</script><style lang="less" scoped></style>

子组件

<template><div v-if="propsData.modelValue"><div class="box"><div>接受到的isShow:{{ propsData.modelValue }}</div><button @click="clsoe">关闭</button></div></div>
</template><script setup lang="ts">
import {ref,reactive,defineProps,defineEmits,
} from "vue";
/*v-model 其实是一个语法糖 通过props 和 emit组合而成的1.默认值的改变
prop：value -> 默认参数是modelValue，当然也可以自定义v-model:isShow1="isShow；
事件：input -> update:modelValue；
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义 修饰符 Modifiers
*/
// 注意点： 1.vue2中是value vue3中是modelValuetype Props = {modelValue: boolean; // v-model默认值 modelValue  };
};let propsData = defineProps<Props>();
let emit = defineEmits(["update:modelValue","update:text",
]); // update:modelValue与props中的modelValue保持一致
let clsoe = () => {emit("update:modelValue", false);
};
</script><style lang="less" scoped>
.box {width: 200px;height: 200px;border: 1px solid #ccc;
}
</style>

多个model在自定义组件中使用场景

自定义修饰符`Modifiers`

内置修饰符 v-model.trim、自定义修饰符v-model:text.isSq

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop

父组件

<template><div class=""></div><button @click="isShow = !isShow">开关</button><div>isShow:{{ isShow }}</div><div>textVal:{{ textVal }}</div><hr /><!-- 内置修饰符 v-model.trim、自定义修饰符v-model:text.isSq  --><com v-model:text.isSq="textVal" v-model="isShow"></com>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import com from "./components/twenty.vue";
let isShow = ref<boolean>(true);
let textVal = ref<string>("你好");
</script><style lang="less" scoped></style>

子组件

<template><div v-if="propsData.modelValue"><div class="box"><div>接受到的isShow:{{ propsData.modelValue }}</div><button @click="clsoe">关闭</button>内容:<input@change="change":value="propsData.text"type="text"/></div></div>
</template><script setup lang="ts">
import {ref,reactive,defineProps,defineEmits,
} from "vue";
/*v-model 其实是一个语法糖 通过props 和 emit组合而成的1.默认值的改变
prop：value -> 默认参数是modelValue，当然也可以自定义v-model:isShow1="isShow；
事件：input -> update:modelValue；
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义 修饰符 Modifiers
*/
// 注意点： 1.vue2中是value vue3中是modelValuetype Props = {modelValue: boolean; // v-model默认值 modelValue// isShow1: boolean;text: string; // 自定义v-modeltextModifiers?: {// modelValueModifiers默认是这样写 我们这里是使用的自定义v-modelisSq: boolean;// default: () => {// }};
};let propsData = defineProps<Props>();
let emit = defineEmits(["update:modelValue","update:text",
]); // update:modelValue与props中的modelValue保持一致
let clsoe = () => {emit("update:modelValue", false);
};
let change = (e: Event) => {// 第三方组件都是这样做v-model的// let target = e.target; //let target: EventTarget | null  已声明“target”，但无法读取其值。let target = e.target as HTMLInputElement;emit("update:text",propsData?.textModifiers?.isBt? target.value + "帅气": target.value); // 自定义了修饰符就+变态二字
};
</script><style lang="less" scoped>
.box {width: 200px;height: 200px;border: 1px solid #ccc;
}
</style>