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

阿里小码

已于 2022-08-06 17:53:08 修改

阅读量3.2k

点赞数

分类专栏： vue3 文章标签： vue.js 前端 typescript

于 2022-08-06 16:53:37 首次发布

本文链接：https://blog.csdn.net/weixin_44668640/article/details/126196855

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue3环境下，如何通过子组件的事件触发父组件的刷新。通过`defineComponent`、`reactive`和`nextTick`函数，实现了父子组件间的通信，展示了具体的代码实现过程，包括子组件发送`isClickRefresh`事件，父组件接收到事件后更新状态并重新渲染。

摘要由CSDN通过智能技术生成

刚刚接触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>