vue3刷新组件，点击子组件刷新父组件

刚刚接触vue3，遇到的需求，点击子组件刷新按钮刷新父组件
话不多说，上代码

父组件：

<template>
	<!-- 通过refresh.showRefresh来控制父组件的显示/隐藏 -->
	<n-layout class="layout" id="drawer-target" v-if="refresh.showRefresh">
		<!-- isClickRefresh监听子组件事件，用于判断子组件是否点击刷新按钮 -->
		<SubjectRight @isClickRefresh="isClickRefresh"/>
	</n-layout>
</template>
<script lang="ts">
	import { defineComponent, nextTick, reactive } from 'vue'
	// 父组件引入子组件
	import SubjectRight from './SubjectRight.vue'
	export default defineComponent({
		name: 'subject-map',
		components: {
			SubjectRight // 在components中注册组件
		}
  })
</script>
<script lang="ts" setup>
	// 在Vue2中响应式数据是通过defineProperty来实现的
	// 而在Vue3响应式数据是通过ES6的Proxy来实现的
	// reactive是Vue3中提供实现响应式数据的方法
	// reactive参数必须是对象(json/arr)
	// 如果给reactive传递了其他对象,默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值的方式
	let refresh = reactive({ showRefresh: true })
	// isClickRefresh监听子组件事件
	const isClickRefresh = () => { // 有参数就把()换成参数(自定义)名称，下面调用
		refresh.showRefresh = false
		nextTick(()=>{ 
			refresh.showRefresh = true
		})
  }
</script>复制

子组件：

<template>
	<div @click="isClickRefresh">刷新</div>
<template>
<script lang="ts" setup>
	// defineEmits无需引入，可以直接使用
	// 使用 defineEmits 声明事件（也就是父级页面上添加的 @监听事件）
	const emits = defineEmits(['isClickRefresh'])
	const isClickRefresh = () => {
		emits('isClickRefresh', true) // 根据需求参数，可带可不带
	}
</script>复制

如有错误或不当请指正~~~