基本用法

我们知道，一个 js Promise 对象，我们可以用 then()、catch()、finally() 进行链式操作，如：

1
2
3
4
5
6
7

promiseObj.then((res) => {
    // do something
}).catch((error) => {
    // do something
}).finally(() => {
    // do something
})

这是 js Promise 的基本使用，但是要用好 Promise，还有一下几个问题需要搞清楚。

怎样创建 Promise 对象

用 Promise 对象创建 Promise 实例

父组件传参数到子组件 - props

在 <script setup> 中用 defineProps() 声明组件的属性，在父组件模板中引用子组件时，就可以给通过属性给子组件传参数（可以是值、变量、函数、对象等）。

defineProps 是编译器宏，Vue3 编译器宏不需要导入，并且只能在 <script setup> 中使用。

ex: 子组件声明、调用属性

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- HelloWorld.vue 子组件-->
<script setup>
// 声明属性
defineProps([{
    msg: String
}])
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>

ex: 父组件使用属性

1
2
3
4
5
6
7
8

<!-- Demo.vue 父组件 -->
<script setup>
import HelloWorld from './HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="Welcome"/>
</template>

父组件传递事件到子组件

用 VueRouter hash 模式时，点击浏览器上的后退按钮，浏览器显示上一次浏览页面的时候，会重新执行页面，像页面刷新一样。

跟微信小程序不一样，微信小程序后退的时候不会重新执行，只是给我们一个 onShow 事件，这样如果需要刷新数据，我们就可以在 onShow 里面解决。

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。

基本语法

在 <script> 标签上添加 setup 属性启用该语法，里面的代码会背编译成组件 setup() 函数的内容，每次组件实例被创建时执行。

1
2
3

<script setup>
// 组合式 API 写在这里
</script>

如果要使用 TypeScript，加上 lang="ts" 属性即可。

1
2

<script lang="ts" setup>
</script>

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。

响应式

响应式即变量数据变化的时候，视图跟着变化。
响应式状态需要明确使用 响应式 API 来创建.
常用 API：

• ref()
• reactive()
• computed()
• watch()
• watchEffect()
• readonly()

一个基于element-ui，实现图片选取和上传的Vue插件，可显著提升管理后台图片选取、上传的用户体验。

源码： https://github.com/coderpan-com/elx-imgbox

效果截图

1、选取图片库中的图片

2、上传图片