vue父组件调用子组件属性_vue子组件获取父组件实例

vue父组件调用子组件属性_vue子组件获取父组件实例在vue2中,子组件调用父组件,直接使用this.$emit()即可。但是在vue3中,很显然使用this.$emit()已经开始报错了,为什么会报错呢?原因是:在vue3中setup是在声明周期beforeCreate和created前执行,此时vue对象还未创建,因此我们无法使用this。那么我们在vue3中,子组件该如何调用父组件的函数呢?方法一:首先写一个Child.vue,重点在setup函数中引入context形参,配合emit使用。定义了两个函数,toFather

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

在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 是想要调用父组件的一个方法

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188360.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Tasker使用企业微信api推送消息到普通微信「建议收藏」

    Tasker使用企业微信api推送消息到普通微信「建议收藏」注册https://work.weixin.qq.com/wework_admin/register_wx注册成功进入管理后台—>我的企业—>微工作台—>邀请关注*使用普通微信关注后才能接收消息应用与小程序—>创建应用*可见范围可以选整个企业企业ID我的企业—>…

  • 微信小程序开发 – 用户授权登陆「建议收藏」

    微信小程序开发 – 用户授权登陆「建议收藏」本篇将帮助读者实现基于微信开发者工具&amp;C#环境下的用户在小程序上的授权登陆。准备:微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/d…

  • 365xav.cf/forum.php,jupyterlab-latex

    365xav.cf/forum.php,jupyterlab-latex#THISISANAUTOGENERATEDFILE.DONOTEDITTHISFILEDIRECTLY.#yarnlockfilev1″@babel/code-frame@^7.0.0″:version”7.8.3″resolved”https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3….

  • PHP递归算法_php递归函数详解

    PHP递归算法_php递归函数详解先设置数据在本地数据库,设置前要先了解pid字段的关系。如果做成菜单还需添加一个路由字段,自行定义。第一种方式先将数据提取出转换成数组。重点是Yarray方法里的递归方式。接下来进行解析方式。重点:一定要在进行递归之前声明一个静态数组,不然会导致数组覆盖。剩下的就是注释的内容也就是判断父节点与节点来判断等级。这步指来回方法调用本身进行处理递归。最后数据会变成其中关系为pid数值存在与id下的下级关系,level为处于第几级;我们来输出一下看看结.

  • 实现一个基于tcc/tlink的简单的编译链接工具

    实现一个基于tcc/tlink的简单的编译链接工具

  • Raid5磁盘阵列修复方法介绍「建议收藏」

    Raid5磁盘阵列修复方法介绍「建议收藏」  在RAID5中,数据条带化后存储在分布式奇偶校验的多个磁盘上。分布式奇偶校验的条带化意味着它将奇偶校验信息和条带化数据分布在多个磁盘上,这样会有很好的数据冗余。而有时候raid5磁盘阵列损坏,我们该如何修复呢?  1.若单个硬盘失效,尝试热插拔,即拔下来再插上去;如果不能解决,则进入RAID配置界面,将该硬盘进行ForceOnLine操作;如果不能解决,尝试更换-其它硬盘…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号