技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据

需求背景

当前有一个页面为父路由页面(/system)
他的子页面是他的两个下级(/system/user /system/auth)

由于搜索框及添加按钮都在父级母版中，现在需要在点击添加按钮或者搜索框搜索时都触发子路由页面对应的方法，如：在tab选中用户列表时，触发子页面内的添加用户方法，tab选中角色权限时，触发子页面的添加角色方法

代码实现

在 /system 中

<template><router-view v-slot="{ Component }"><component ref="order" :is="Component" /></router-view>
</template>
<script setup>import { ref } from 'vue'let order = ref()const test = () => {order.value.add()}
</script>

在 /system/user ， /system/auth中

  defineExpose({add() {console.log('添加用户')//   console.log('添加角色')}})

技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据相关推荐

vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...
Vue2与Vue3中Ref绑定元素
Vue之Ref绑定元素获取实例我们可以通过给元素绑定ref属性来获取这个元素的实例,来调用实例中的某种方法来实现某种功能 Vue2实现 <template><!-- 单个绑定 -- ...
【vue3】ref获取v-for循环渲染的元素
前言在vue2里我们可以给元素绑定ref属性,然后使用this.$refs.xxx 就可以获取到元素. 而在vue3版本中,你可以继续使用vue2的option Api的语法,也可以使用vue2的写 ...
Vue3的Ref提案到底发生肾摸事了
Vue3的Ref提案到底发生肾摸事了朋友们好,我是大圣,最近vue3的ref提案社区讨论的比较多,社区里我看了一下相关的rfc和知乎讨论,我发现很多年轻人不讲武德,今天也摸鱼写一点我的看法吧先说结 ...
Vue3 的 ref 和 reactive 问题
如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础 ...
[vue3.x]ref的使用
[vue3.x]ref的使用普通的应用 DOM 元素将在初始渲染后分配给 ref 因为 ref 本身是作为渲染函数的结果而创建的,在初始渲染时你不能访问它们--它们还不存在! 表单的主动提交场景描 ...
绑定服务调用本地服务中的方法
如果想调用服务中的方法, 通过startService()是做不到的, 这时需要用bindService来解决. 下面的demo是在Activity中调用Service中的自定义方法---method ...
CREATE VIEW SQL：在SQL Server中使用索引视图
This is the fourth article in a series of learning the CREATE VIEW SQL statement. So far, we have do ...
CREATE VIEW SQL：通过SQL Server中的视图插入数据
This is the third article in a series of learning the CREATE VIEW SQL statement. So far, I'd say tha ...

技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据

需求背景

代码实现

技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据相关推荐

最新文章

热门文章