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 = falsenextTick(()=>{ 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>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！