vue3和element-plus笔记

对子组件直接使用v-model

子组件内定义如下

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

父组件定义如下

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

在子组件中更新modelValue值

emits("update:modelValue",$event)

如何使用外部按钮,触发打开el-upload的文件选择

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

const uploadFileRef = ref()

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

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

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

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

3.最终效果

如何让el-dialog总是置顶

1.对dialog组件添加如下值

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

在vue3的setup模式下使用onMounted()

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

在vue3的setup模式下使用计算属性

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