vue3.0(SFC(<script setup>))+Sass+TypeScript使用&报错记录&解决方案(持续记录，保持关注)

Author: 图恩Category: 编程开发Views: 658Published: 2022-05-06

Here's the polished English version of your article with technical accuracy and clarity: --- **Article** **One.** When initializing DOM instances with ECharts in Vue 2.0, you need to use `this.$refs.domEle`. However, **version 3.0 introduces a change** that requires defining a field in the setup function, and specifying a ref attribute in the DOM element tag with the same name as the variable declared in the setup. **Example:** ```html

``` **Code Snippet:** ```vue ``` **Error Message:** ``` Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'. ``` **Solution:** ```vue ``` **Two.** Child components can retrieve parent component data using `getCurrentInstance()`. **Code Snippet:** ```vue ``` --- **Key Differences:** 1. **Type Safety:** Vue 3 requires explicit type annotations for reactive variables (e.g., `ref`). 2. **Composition API:** `getCurrentInstance()` provides access to parent component context for debugging purposes. **Note:** The `as HTMLElement` cast is necessary to bypass TS type checking while maintaining compatibility with the original code.