vue3封装城市联动组件

一.准备

1.axios

利用axios发送请求，拿到全部城市数据。

在项目根目录下打开任意终端，执行yarn add axios命令。
项目中需要发送请求统一统一放在src/api/index.js。

import axios from 'axios'
// 获取城市数据
// 1. 数据在哪里？https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json
// 2. 何时获取？打开城市列表的时候，做个内存中缓存
// 3. 怎么使用数据？定义计算属性，根据点击的省份城市展示
export const getCityList = async () => {
   
  // 添加缓存，防止频繁加载列表数据
  if ((window as any).cityList) {
   
    // 缓存中已经存在数据了
    return(window as any).cityList
  }
  const ret = await axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
  // 给window对象添加了一个属性cityList
  if (ret.data) {
   
    (window as any).cityList = ret.data
  }
  // 把数据返回
  return ret.data
}

2.vueuse/core
利用vueuse/core里的onClickOutside，判断点击是否是外部组件，来帮助我们关闭弹层。
终端中执行yarn add @vueuse/[email protected],这里安装指定版本，各位按需选择。

二.代码实现
1.封装
将其封装为局部组件，文件放在src/libs目录下,新建city.vue组件。
代码如下（示例）：

1. 使用
   在任意.vue结尾的文件中引入city.vue就可以使用。
   如果有默认数据的话，将默认数据传递给子组件。
   代码如下（示例）：