vue3父子组件相互调用方法详解

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

1、前言

在vue3项目开发中,我们常常会遇到父子组件相互调用的场景,下面以setup语法糖格式详细聊聊父子组件那些事儿。文章来源地址https://www.toymoban.com/news/detail-665505.html

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

2.1 子组件Child.vue

<template>
	<div>我是子组件</div>
</template>
 
<script setup>
// 第一步:定义子组件的方法
const sayHello = (value) => {
	console.log(value)
}
// 第二部:暴露方法
defineExpose({
	sayHello 
})
</script>

2.2 父组件Father.vue

<template>
	<button @click="getChild">触发子组件方法</button>
	<child ref="childRef" />
</template>
<script setup>
import Child from './components/child.vue'
// 定义与 ref 同名变量
const childRef = ref(null)
const getChild = () => {
	// 调用子组件的方法或者变量,通过value
	childRef.value.hello("hello world!");
}
</script>

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

3.1 父组件Father.vue

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

3.2 子组件Child.vue

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

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

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

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

相关文章

  • vue3 调用子组件的方法

    child.vue parent.vue

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

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

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

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

    2024年02月06日
    浏览(46)
  • VUE3父子组件传参

    父传子 父组件 template    sonComponent :sendValue=\\\"value(//传递的值)\\\"/sonComponent /template //引入组件 import sonComponent from \\\"XXXXX\\\"; 子组件 //定义名字与父组件对应 const props = defineProps({   sendValue:{type: String,default:\\\'\\\'}  }) 子传父 子组件 // 定义发送 const emit = defineEmits([\\\'sendValue\\\']) //发送(在想

    2024年02月07日
    浏览(42)
  • vue3-父子组件间通信

    在实际业务开发的过程中,我们时常会遇到组件间的通信问题,比如:父子组件间通信、同级组件间通信等。本篇文章中主要介绍父子组件间通信。父子组件间通信主要有以下常见形式: 方案 父组件向子组件 子组件向父组件 props/emits props emits v-model/emits v-model emits ref/emits

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

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

    2024年01月16日
    浏览(47)
  • vue3 父子组件传值 记录

    最近这个组件之间传值用的较多,我这该死的记性,总给忘记写法,特此记录下 补充:LeftView.vue 是父组件; Video.vue 是子组件 Video.vue 子组件 LeftView.vue 父组件 第一步 创建bus.js文件 第二步 分别在需要相互传参的组件中引入bus.js文件,并相互传参

    2024年02月11日
    浏览(42)
  • VUE3+TS(父子、兄弟组件通信)

    目录 父传子值、方法(子调用父值、方法) 子传父值(父调用子值) 父读子(子传父)(父调用子值、方法) 兄弟(任意组件)通信 引入Mitt来完成任意组件通信 1、统一规范写法,通过在子组件标签上绑定属性和值,来传递到子组件,子组件再通过defineProps来接收,先给其

    2023年04月08日
    浏览(47)
  • 在Vue3中,父组件调用子组件中的方法

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

    2024年02月19日
    浏览(41)
  • Vue3父子组件间传参通信

    本文主要是记录Vue3在setup语法糖下的父子组件间传参的四种方式 Vue3+TypeScript 父组件传值给子组件主要是由父组件为子组件通过v-bind绑定数值,而后传给子组件;子组件则通过defineProps接收使用。 如下为父组件 Father.vue 如下为子组件Son.vue 父组件 Father.vue 中在调用 Son.vue 这个子

    2024年01月19日
    浏览(75)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包