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

本文链接：https://blog.csdn.net/NOyesNONO_/article/details/136644112

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

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>

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

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

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

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