Vue3父子组件相互调用方法举例详解

更新时间：2023年08月15日 11:16:40 作者：不甜呐

这篇文章主要给大家介绍了关于Vue3父子组件相互调用方法的相关资料,vue中我们常常用到组件,那么组件中互相调用也是经常遇到的,需要的朋友可以参考下

一、父组件调用子组件方法

子组件需要使用defineExpose对外暴露方法，父组件才可以调用！

1.子组件

<template>
	<div>我是子组件</div>
</template>
<script lang="ts" setup>
	// 第一步：定义子组件的方法
	const hello = (str: string) => {
		console.log('子组件的hello方法执行了--' + str)
	}
	// 第二部：暴露方法
	defineExpose({
		hello
	})
</script>

2.父组件

<template>
	<button @click="getChild">触发子组件方法</button>
	<!-- 一：定义 ref -->
	<Child ref="childRef"></Child>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import Child from '../../components/child.vue';
	// 二：定义与 ref 同名变量
	const childRef = ref <any> ()
	// 三、函数
	const getChild = () => {
		// 调用子组件的方法或者变量，通过value
		childRef.value.hello("hello world！");
	}
</script>

3.测试结果

二、子组件调用父组件方法

1.父组件

<template>
	<Child @sayHello="handle"></Child>
</template>
<script lang="ts" setup>
	import Child from '../../components/child.vue';
	const handle = () => {
		console.log('子组件调用了父组件的方法')
	}
</script>

2.子组件

<template>
	<view>我是子组件</view>
	<button @click="say">调用父组件的方法</button>
</template>
<script lang="ts" setup>
	const emit = defineEmits(["sayHello"])
	const say = () => {
		emit('sayHello')
	}
</script>

3.测试结果

总结

到此这篇关于Vue3父子组件相互调用方法的文章就介绍到这了,更多相关Vue3父子组件相互调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue定义在computed的变量无法更新问题及解决
这篇文章主要介绍了vue定义在computed的变量无法更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue-drag-chart 拖动/缩放图表组件的实例代码
这篇文章主要介绍了vue-drag-chart 拖动/缩放的图表组件的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
javaScript与vue获取元素的方法代码示例
在开发中我们可能会遇到这样的问题,文本框聚焦、元素点击等,所以下面这篇文章主要给大家介绍了关于javaScript与vue获取元素的相关资料,需要的朋友可以参考下
2023-10-10
vue+threejs写物体动画之物体缩放动画效果
最近在vue中安装Three.js,无聊顺便研究一些关于3D图形化库,下面这篇文章主要给大家介绍了关于vue+threejs写物体动画之物体缩放动画效果的相关资料,需要的朋友可以参考下
2022-10-10
vue实现el-table点选和鼠标框选功能的方法
在Vue中我们经常需要处理表格数据,这篇文章主要给大家介绍了关于vue实现el-table点选和鼠标框选功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下
2024-02-02
Vue.js第二天学习笔记（vue-router）
这篇文章主要为大家详细介绍了Vue.js第二天的学习笔记，关于vue-router的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Vue2实现组件延迟加载的示例代码
当一个页面需要加载较多个组件时,并且组件自身又比较复杂,如果一次性加载,可能等待时间较长,体验不好,这个时候就需要延迟加载了,本文为大家介绍了Vue2实现组件延迟加载的示例代码,需要的可以参考下
2024-01-01
深入理解Vue3响应式原理
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下
2022-12-12
vue 点击按钮实现动态挂载子组件的方法
今天小编就为大家分享一篇vue 点击按钮实现动态挂载子组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09