【九月打卡】第9天. 更多思考与拓展知识

课程名称：web前端架构师

课程章节：第11周 第五章

主讲老师：张轩

课程内容：vue 组件间的通信，如何实现图片预览

vue组件间的通信

父组件中获取子组件

• this.$refs.xxx
• 通过 ref 获取，如下

<script setup lang="ts">
import UploadFile from '@/components/UploadFile'

const uploadRef = ref<InstanceType<typeof UploadFile>| null>(null)
</script>
<template>
  <UploadFile
    :drag="true"
    ref="uploadRef"
  />
</template>

子组件获取父组件

• this.$parent
• getCurrentInstance().proxy.$parent

<script setup lang="ts">
onMounted(() => {
  const instance =  getCurrentInstance()
  console.log(instance.proxy.$parent)
})
</script>

注意，子组件调用父组件中的方法是一种很不好的做法，应保持单项数据流，子组件发送特定的事件到父组件触发父组件的修改

$parent 可以一直向上访问 xxx.$parent.$parent.xx

provide / inject

文档地址 https://cn.vuejs.org/guide/components/provide-inject.html

使用事件监听器完成父子组件的通信

在 vue3 中，$on 和 $off 已被移除，可以使用第三方库。 vue 官方推荐使用 mitt. https://github.com/developit/mitt

Element-plus Upload 组件源码分析

element-plus 源码地址 https://github.com/element-plus/element-plus

现在源码相比于课程中的变化比较大，看了之后对之前实现的组件稍加改进
将入口文件

import UploadFile from './UploadFile.vue'
import type { Plugin } from 'vue'

export const UploadFilePlugin:Plugin = {
  install (app) {
    app.component('UploadFile', UploadFile)
  }
}
export type UploadFileInstance = InstanceType<typeof UploadFile>
export default UploadFile

element-plus 还使用了 unplugin-vue-define-options 这个 vite 插件，可以在 script setup 语法糖声明组件名称

<script setup lang="ts">
defineOptions({
  name: 'UploadFile'
})
</script>

导入组件时，就可以拿到组件名称了

import UploadFile from './UploadFile.vue'
app.component(UploadFile.name, UploadFile)

图片预览

当我们要上传图片时，可以需要预览图片

• 上传速度较慢
• 手动上传时，我们希望看到我们要上传的图片是什么
  实现方式
• URL.createObjectURL()
  • 一个静态方法，创建一个 DOMString，返回一个 URL，URL 和 document 绑定，表示指定的 File 对象
  • 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
• FileReader.readAsDataURL()
  • 一个 FileReader 上面的实例方法，读取指定的 File 对象，读取完成的时候触发回调，返回 URL 格式的字符串（base64）
  • 文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL

实现过程比较简单，直接使用就可以了