自动引入插件后无需再引入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 -->
<com
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>
</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中是modelValue
type 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中是modelValue
type Props = {
modelValue: boolean; // v-model默认值 modelValue
// isShow1: boolean;
text: string; // 自定义v-model
textModifiers?: {
// modelValueModifiers默认是这样写 我们这里是使用的自定义v-model
isSq: 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>