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

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

Logo

前往低代码交流专区

更多推荐