继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

flask
关注TA
已关注
手记 45
粉丝 2
获赞 2

课程名称: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

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

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

Element-plus Upload 组件源码分析

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

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)

图片预览

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

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

图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP