vue3.0 子组件调用父组件中的方法

在vue2中，子组件调用父组件，直接使用this.$emit()即可。

但是在vue3中，很显然使用this.$emit() 已经开始报错了，为什么会报错呢？

原因是：在vue3中setup是在声明周期beforeCreate和created前执行，此时vue对象还未创建，因此我们无法使用this。

那么我们在vue3中，子组件该如何调用父组件的函数呢？

方法一：

首先写一个 Child.vue，重点在 setup 函数中引入 context 形参，配合 emit 使用。定义了两个函数，toFatherNum(), toFatherObject() 分别向父组件传递数字和对象

<template><a-button @click="toFatherNum">子传父数字</a-button><a-button @click="toFatherObject">子传父对象</a-button>
</template><script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({name: "Child",setup(props, context) {function toFatherNum() {context.emit('eventIsNum', 888)}function toFatherObject() {context.emit('eventIsObject', { keyName: 'I am value' })}return{toFatherNum,toFatherObject,}}
})
</script><style scoped></style>

然后是 Father.vue，通过事件名称 eventIsNum 和 eventIsObject 接收子组件传递的值

<template><Child@eventIsNum="receiveChildNum"@eventIsObject="receiveChildObject"></Child>
</template><script lang="ts">
import { defineComponent } from 'vue'
import Child from "./Child.vue";
export default defineComponent({name: "Father",components: {Child,},setup() {function receiveChildNum(e: number) {console.log(e, '接收子组件数字');}function receiveChildObject(e: object) {console.log(e, '接收子组件对象');}return {receiveChildNum,receiveChildObject,}}
})
</script><style scoped></style>

方法二：
1.在子组件里引入useContext
import { useContext } from "vue";
2.获取上下文
const ctx = useContext();
3.在需要调用父组件的地方写上下面的代码进行调用
ctx.emit(‘fatherMethod’); //fatherMethod 是想要调用父组件的一个方法

方法一和二供大家随意挑选哦！如果大家有更好的方法，欢迎大家评论留言或私信。
希望大家一起进步哟。

vue3.0 子组件调用父组件中的方法相关推荐

js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
vue 子页面调用父页面的参数_Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图父级组件实现在父级组件中写一个_editParentText的方法来修改组件中 ...
vue+element 子组件调用父组件失败
项目中遇到vue子组件调用父组件的方法,我写的是this.$emit('search');但是没有成功,查了下说有三种子组件调用父组件的方式: 第一种方法是直接在子组件中通过this.$parent. ...
vue 子组件调用父组件方法、值（父传子）；父组件调用子组件方法、值（子传父）。
一.子组件调用父组件方法(父传子-方法) 场景:子组件是弹出框组件.当点击确定时,将新增的值增加到父组件的列表.就要调用父组件的getLIst()方法. 代码: //父组件利用@子组件方法名=&qu ...
vue子组件调用父组件内的方法
子组件调用父组件方法随笔:后面时间充足了再补充父组件 <template><div><head-title3 ref="headerNews3"& ...
react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
使用 this.$parent 子组件调用父组件方法
子组件调用父组件里的方法(报错:Uncaught TypeError: this.$parent.getUserList is not a function) 参考文章链接: https://blog ...
vue子组件调用父组件方法回调
子组件调用父组件方法,父组件执行完后,进行回调,代码如下: 子组件this.$emit('change', this.dataList, (loading) => {this.loading = ...

vue3.0 子组件调用父组件中的方法

vue3.0 子组件调用父组件中的方法相关推荐

最新文章

热门文章