一廊营、vue2.0通過(guò)echarts初始化dom實(shí)例的時(shí)候要使用this.$refs.domEle, 但是3.0發(fā)生了改變歪泳，需要在setup定義一個(gè)字段，在dom元素標(biāo)簽里定義跟setup里聲明的變量同名的ref屬性值,e.g: <div id="ryCharts" ref="chartDom" class="bcontent"></div>
<script setup lang="ts">
const chartDom = ref<HTMLElement | null>(null);
let myChart = echarts.init(chartDom.value); //這行代碼會(huì)有ts驗(yàn)證的報(bào)錯(cuò)露筒，但是不影響正常運(yùn)行
</script>
報(bào)錯(cuò)信息如下：
Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'.
Type 'null' is not assignable to type 'HTMLElement'.
解決方案如下：
<script setup lang="ts">
const chartDom = ref<HTMLElement | ''>('');
let myChart = echarts.init(chartDom.value as HTMLElement);
//通過(guò)console會(huì)發(fā)現(xiàn)chartDom.value其實(shí)跟之前this.$refs.domEle拿到的值是一樣的呐伞，都是元素信息;
//ts是js的超集，它會(huì)驗(yàn)證數(shù)據(jù)格式邀窃，所以需要為它設(shè)置類(lèi)型 HTMLElement.
</script>
二荸哟、子組件可以通過(guò)getCurrentInstance()獲取父組件里的數(shù)據(jù)
//import
import { onMounted, getCurrentInstance } from 'vue'
//use
const currentInstance = getCurrentInstance()
onMounted(() => {
console.log(currentInstance?.parent)
})
三、事件總線(xiàn)（用于非父子組件通信）:事件總線(xiàn)模式可以被替換為使用外部的瞬捕、實(shí)現(xiàn)了事件觸發(fā)器接口的庫(kù)例如 mitt 或 tiny-emitter,這里使用tiny-emitter
1.install(下載)
npm install --save tiny-emitter
2.usage(使用)
// for js
const emitter = require('tiny-emitter/instance')
//接收事件
emitter.on('some-event', function (arg1, arg2, arg3) {
//
});
//發(fā)送事件
emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');
參考鏈接：1. vue3.X遷移策略
