(自用笔记)每天一点vue3——defineEmits / 生命周期钩子 / echarts

我是想做一个vue3+echarts的账单数据展示项目，因为有vue2的基础，打算直接在这个项目上熟悉掌握vue3的新特性。这系列笔记就按照遇见问题解决问题的思路更新，不按照官方快速上手的章节，特此说明。

1. defineEmits 子父通信
   子组件

<template>
	<div @click='send'>给父组件传值</div>
</template>
<script setup>
const emits = defineEmits('send')
function send(){
	emits('get','我是子组件的值')
}
</script>

父组件

<template>
	<Child @get='get'></Child>
	<div>{{msg}}</div>
</template>
<script setup>
import Child from '@/component/Child'
let msg = null
function get(val){
	msg = val
}
</script>

2. 生命周期钩子在组件的 setup() 阶段被同步调用，且需要引入才能使用。 生命周期钩子官方文档

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId
onMounted(() => {
  intervalId = setInterval(() => {
    // ...
  })
})

onUnmounted(() => clearInterval(intervalId))
</script>

3. echarts
   在项目中引入echarts官方示例

按照官方的引入即可显示图表。
期间需要注意的是：

• 获取dom的时候可能会报错，这是因为dom还没有挂载，放在onMounted里执行方法就好了。
• 记得给dom一个宽高。
• 
• 这里有一个问题是横坐标显示不完全，下次再看 哈哈