Vue3 父路由调用子路由方法失败

最新推荐文章于 2024-12-24 16:04:58 发布

Travrller

最新推荐文章于 2024-12-24 16:04:58 发布

阅读量863

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/Travrller/article/details/129633324

版权

文章描述了一个Vue3项目中，父页面试图通过查询条件影响子页面数据展示的问题。由于使用了Vue2的语法来获取子组件实例，导致数据未能正确更新。作者指出，Vue3中应使用v-slot和ref来获取子组件实例并调用其方法。通过这种方式，成功实现了父子组件间的通信，解决了数据不更新的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

实现功能：数据的查询选项在父页面中，而数据的显示在子页面中。并且子页面是父页面的子路由。实现对父页面的查询条件使子组件显示相应的数据。
效果图在这里插入图片描述

问题描述

点击查询下拉框时，父页面调用子页面方法，后端返回数据后页面数据未真正写入。表现形式为页面显示数据未变化。而且当使用子组件的查询条件时，会初始化父组件修改的数据值为默认值。

原因分析：

语法混淆
创建的项目为Vue3项目，但是使用的是Vue2的语法。
实例获取失败
- Vue2获取实例方法

	<router-view  ref="component" />

	 this.$nextTick(function(){
	 	this.$refs.component.Method(param);
	 })

- Vue3 获取实例方法

	<router-view v-slot="{Component}">
		<component ref="deviceList" :is="Component" />
	</router-view>

<script setup>
	import {ref} from 'vue'
	var deviceList = ref()
	const ParentMethod = (value) =>{
		getCurrentProductDeviceCount();
        deviceList.value.ChildMethod(param);
    }

父子路由方法调用
父组件调用子组件方法时，虽然子组件的方法执行了，但是对于子组件来说是不会触发其数据的动态绑定。具体原因还没想明白。

解决方案：

对<router-view />使用v-slot获取子页面组件实例，对其进行方法的调用。

路由视图配置

<router-view v-slot="{Component}">
	<component ref="deviceList" :is="Component" />
</router-view>

使用方法

<script setup>
	import {ref} from 'vue'
	var deviceList = ref()
	const currentProductChange = (value) =>{
		getCurrentProductDeviceCount();
        deviceList.value.getDeviceByProduct(value); //getDeviceByProduct()是子组件方法
    }
</script>