自动引入插件后无需再引入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>
