vue3和element-plus笔记

NullPointerZZZ2024-12-23 11:22

子组件内定义如下

javascript 复制代码

const props = defineProps({
    modelValue: {
        type: String,
        required: true
    }
})
const emits = defineEmits(["update:modelValue"])

父组件定义如下

javascript 复制代码

<script setup>
const deleteId = ref(null)
</script>
<template>
  <sub v-model="deleteId"></sub>
</template>

在子组件中更新modelValue值

javascript 复制代码

emits("update:modelValue",$event)

1.首先对el-upload组件定义ref

javascript 复制代码

const uploadFileRef = ref()

html 复制代码

<el-upload
   ref="uploadFileRef"
   ....省略
>
   ...省略
</el-upload>

2.然后定义一个按钮和点击事件即可触发打开文件选择

html 复制代码

<el-form-item>
    <el-button @click="onClickSelectFile">选择文件</el-button>
</el-form-item>

javascript 复制代码

const onClickSelectFile = ()=>{
  uploadFileRef.value.$el.querySelector('input').click()
}

3.最终效果

1.对dialog组件添加如下值

html 复制代码

<el-dialog
   :append-to-body="true"
   ...省略
>
   ...省略
</el-dialog>

javascript 复制代码

// 使用 onMounted 钩子确保在组件挂载后调用
onMounted(() => {
  ElMessage.success("onMounted ok")
});

javascript 复制代码

// 新页面名称
const newTitle = computed(() => {
  return props.bizStorageId + "上传"
});