vue3 自定义组件v-model
vue3 自定义组件 v-model 双向绑定
·
v-model
可以在组件上使用以实现双向绑定。
vue 2.x中 使用方法
子组件代码
// 子组件代码
<template>
<div>
<el-cascader
:value="officeOrgId"
:options="options"
:props="{
checkStrictly: true,
label: 'name',
value: 'id',
multiple: multiple
}"
filterable
clearable
:show-all-levels="showAllLevels"
style="width: 100%"
@change="handleChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
options: []
}
},
props: {
officeOrgId: { // 用props接受值
type: Array,
default: function () {
return []
}
},
multiple: {
type: Boolean,
default: false
},
showAllLevels: {
type: Boolean,
default: false
}
},
model: {
prop: 'officeOrgId', // 绑定model的值
event: 'change' // 触发事件
},
methods: {
handleChange(val) {
console.log(val)
this.$emit('change', val) // emit 事件 实现双向绑定
}
}
}
</script>
vue 3.x中 使用方法
<UploadImg v-model="fileList" />
// 会被编译成
<UploadImg :modelValue="fileList" @update:modelValue="newValue => fileList= newValue" />
子组件代码
<template>
<el-upload
v-model:file-list="modelValue"
:action="uploadImgServer"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:headers="{
token: token,
}"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps, getCurrentInstance, defineEmits } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { localGet, uploadImgServer } from "@/utils";
import type { UploadProps, UploadUserFile } from "element-plus";
const props = defineProps({
modelValue: {
type: Array,
default: [],
},
});
const emits = defineEmits(["update:modelValue", "change"]);
const token = localGet("token") || "";
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const imgList = ref([]);
console.log(imgList, "imgList");
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!;
dialogVisible.value = true;
};
const handleSuccess: UploadProps["onSuccess"] = (
response,
uploadFile,
uploadFiles
) => {
imgList.value = uploadFiles;
emits("update:modelValue", imgList.value);
};
</script>
v-model
的参数
默认情况下,v-model
在组件上都是使用 modelValue
作为 prop,并以 update:modelValue
作为对应的事件。我们可以通过给 v-model
指定一个参数来更改这些名字
<UploadImg v-model:fileList="fileList" />
// 会被编译成
<UploadImg :fileList="fileList" @update:fileList="newValue => fileList= newValue" />
对应的子组件中的代码改成如下代码:
const props = defineProps({
fileList: {
type: Array,
default: [],
},
});
const emits = defineEmits(["update:fileList"]);
emits("update:fileList", imgList.value);
更多推荐
所有评论(0)