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)


相关推荐

  • web网络聊天室

    web网络聊天室花了四天时间做了一个简单的web聊天室前端页面效果大概是下面这个样子1.登陆界面2.注册界面这里首先会检查用户名是否重复,如果重复,会提示你用户名已存在反正显示可用3.聊天室界面登陆成功会在左边显示登陆人的名称以及当前在线人数。然后在下面可用选择对谁说以及一些文字表情,字体颜色什么的4.聊天功能会显示发送者名称,以及对谁说,语气词,以及发送时间最后总结一下做的…

  • sql中declare声明变量_什么是变量说明

    sql中declare声明变量_什么是变量说明前言:最近在修改Android项目的后台业务实现,发现很多地方都需要跟数据库的表连接,视图,存储过程打交道,接触一段时间,感觉不会编写sql脚本真是硬伤,在此小结一下。

  • phpstrom 2021 激活码[免费获取]

    (phpstrom 2021 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlMLZPB5EL5Q-eyJsaWN…

  • 缓冲流、转换流、序列化流、Files

    缓冲流、转换流、序列化流、Files

  • 芯片架构–四大处理器架构「建议收藏」

    芯片架构–四大处理器架构「建议收藏」处理器分为复杂指令集计算机(CISC)和精简指令集计算机(RISC)。1、x86架构我们使用的电脑以及公司的服务器,大部分采用了x86架构的处理器,以intel和AMD的处理器为主。x86架构的处理器采用了CISC指令集(复杂指令集计算机),x86架构的CPU分为x86和x86-64两类,目前主流的是x86-64,即64位的处理器。2、ARM架构我们的手机几乎全部使用了ARM架构,采用了RISC指令集(精简指令集),ARM的优势在于低功耗,因此非常适合手机等终端使用,x86架构的处理器无

  • 数据可视化编程实战_大数据可视化

    数据可视化编程实战_大数据可视化以R可视化为桥梁经常有对比R,Python和Julia之间的讨论,似乎R语言在这三者之中是最为逊色的,实则不可一概而论。R语言在常规数据分析的场景下,如数据读入,预处理,整理,以及单机可视化方面表现出的优势,无论从用户体验,还是代码流畅度,令另两种语言略逊一筹。本文将从统计学中最基本的密度曲线的绘制,来串讲一下题目中所涉及的R语言可视化中三个强大的可视化包的用法,以及之间的联系。以此为基础,进阶高段,可以自然过渡到Python,Julia等语言的可视化实践活动中。首先引入本次实践使用的数

    2022年10月29日

发表回复

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

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