vue3 父组件与路由子组件相互调用

这篇具有很好参考价值的文章主要介绍了vue3 父组件与路由子组件相互调用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

路由子组件通知父组件实现

Framework.vue中通过路由出口<router-view/>,展示了Main.vue组件,但是现在需要在Main.vue组件中去调用Framework.vue组件中的方法,可以有以下几种做法

可以使用provide/inject的机制

Framework.vue
<template>
	<div>
	
		framework.vue
		
		<router-view/>
		
	</div>
	
<template>

<script>

import { ref, reactive, getCurrentInstance, nextTick, watch, provide } from 'vue'

provide('testFun',()=>{
    console.log('framework testFun()..');
})
</script>
Main.vue
<template>
	<div class="main">
	
       <el-button @click="testFun">tt</el-button>
              
    </div>
	
<template>

<script>

	import { ref,reactive, nextTick, inject } from 'vue'
    
    let testFun = inject('testFun')

</script>

可以直接在<router-view @kk=“kk”/>绑定事件监听

Framework.vue
<template>
	<div>
	
		framework.vue
		
		<router-view @kk="kk"/>
		
	</div>
	
<template>

<script>

import { ref, reactive, getCurrentInstance, nextTick, watch, provide } from 'vue'

const kk = () =>{
    console.log('kk');
}
</script>
Main.vue
<template>

    <div class="main">
    
       <el-button @click="testKK">KK</el-button>
       
    </div>
    
</template>

<script setup>

    import { ref,reactive, nextTick, inject } from 'vue'

    const emit = defineEmits([
        'kk'
    ])

    const testKK = ()=>{
        emit('kk')
        console.log('testKK') // 先触发父组件的自定义事件, 调用父组件中绑定的方法之后,再执行的此次打印testKK
    }
    

</script>

<style lang="scss"></style>

可以使用<router-view />的组件写法

Framework.vue
<template>
	<div>
	
		framework.vue
		
		<router-view v-slot:="{Component,route}">
           <component @kk="kk" :is="Component" :key="route.path"/>
         </router-view>
		
	</div>
	
<template>

<script>

import { ref, reactive, getCurrentInstance, nextTick, watch, provide } from 'vue'

const kk = () =>{
    console.log('kk');
}
</script>
Main.vue
<template>

    <div class="main">
    
       <el-button @click="testKK">KK</el-button>
       
    </div>
    
</template>

<script setup>

    import { ref,reactive, nextTick, inject } from 'vue'

    const emit = defineEmits([
        'kk'
    ])

    const testKK = ()=>{
        emit('kk')
    }
    

</script>

<style lang="scss"></style>

父组件中调用路由子组件中的方法

可参考:vue3 调用router-view下的组件方法文章来源地址https://www.toymoban.com/news/detail-525827.html

  • 有的时候,我们需要在当前组件组件中,调用路由子组件中的方法(之前都是直接引入的子组件,然后通过ref引用该子组件,然后通过ref直接调用,但是注意这里的区别是:路由子组件,而非在父组件中直接使用的子组件
  • 首先,可以确定的是子组件必须将供外界调用的方法暴露出去
  • 不能直接在<router-view/>中直接使用ref然后调用,这里拿到的组件实例并非路由子组件,因而不能调用子组件中的方法
  • 使用<router-view/>的组件写法,才可以使用ref引用到路由子组件
Framework.vue
<template>
	<div>
	
		framework.vue

		<el-button @click="triggerJJ">触发路由子组件的jj方法?</el-button>
		
		<router-view v-slot:="{Component,route}">
		
           <component ref="routerViewRef" :key="route.path"/>
           
         </router-view>
		
	</div>
	
<template>

<script>

import { ref, reactive } from 'vue'

const routerViewRef = ref()

const triggerJJ = () => {
    routerViewRef.value.jj()
}


</script>
Main.vue
<template>
    <div class="main">

        main-jj

    </div>
</template>

<script setup>

    import { ref,reactive, nextTick, inject } from 'vue'
    
    const jj = ()=>{
        console.log('main');
    }

    defineExpose({
        jj
    })

</script>

<style lang="scss">
    
</style>

到了这里,关于vue3 父组件与路由子组件相互调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(50)
  • 【前端】在Vue页面中引入其它vue页面 数据传输 相互调用方法等

    1.this.$emit ,子传父 2.this.$children属性 this.$children返回的是数组 例子: 3.通过this.$refs获取组件 4.this.$parent获取父组件数据 this.$parent返回的是对象,this.$children返回的数组 例子: 需求         在 home.vue 中引用 headView.Vue 方案: home.vue 代码: 只需要在home.vue 想要的地方添加 

    2024年02月07日
    浏览(38)
  • vue3父组件调用子组件的方法

    东风vue3 父组件调用子组件的方法是通过 expose 和 ref 来实现的,我们可以通过 expose 来控制父组件可以访问子组件那些的方法和对象,我们将通过 setup api (组合式 api)和 option api (选项式 api)来演示父组件如何调用子组件的方法。 1,组合式API 父组件通过ref定义子组件实例,通过

    2024年02月11日
    浏览(44)
  • vue3.0父级组件调用子组件方法

    场景:在页面开发过程中,我经常涉及到不同组件之间的元素和方法的调用。就此记录在vue3.0项目,也是我开发的开源项目中的实现方式。 以下以我的代码实现为例:在左侧菜单中,通过点击新建会话,在会话列表中新建一个会话框。 其中:会话列表页面是菜单的子级组件

    2024年02月06日
    浏览(49)
  • vue3 调用子组件的方法

    child.vue parent.vue

    2024年02月14日
    浏览(35)
  • vue3父组件使用ref调用子组件方法

    在vue2中,父组件通过ref调用子组件的方法只需要给子组件添加ref属性,然后使用this.$refs.XXX.method即可 但是在vue3中,子组件需先使用defineExpose将方法暴露给父组件 调用方法如下: 1、使用getCurrentInstance 2、使用ref函数创建一个响应式的引用,并将其绑定到子组件上

    2024年01月16日
    浏览(50)
  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(44)
  • 在Vue3中,父组件调用子组件中的方法

    前言: 最近在写一个项目的过程中,遇到了父组件需要调用子组件中方法的情况,最终找到了实现方法,总结如下: 1.在子组件中定义方法并暴露出去 2.在父组件中获取子组件并调用子组件中的方法

    2024年02月19日
    浏览(44)
  • vue3.0 父组件调用子组件方法及获取子组件的值

    通过对比2.0的获取及调用方式这里我们也可以借鉴2.0中的this.$refs去获取3.0和2.0的refs获取的方式有点大同小异,但是思路还是一样的这里我详细的讲解一下他的调用方式及获取方法 1.第一步需要我们在父组件中定义一个方法 当我们点击这个方法的时候去调用子组件的方法 代码

    2024年02月14日
    浏览(30)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包